Change Color Input Underline

Ionic Framework ionic-v3
1

Hi guys,
I’ve got some simple input components:

  <ion-item class="login-fields">
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

My page looks like this at the moment:

image
Capture.PNG1920×1040 144 KB

I’d simply like to change the color of the underline rectangles under the input fields. But I can’t figure out how I’d do this :confused:
Could someone help me with this?

Kind regards
Bram

2

Look in the source for SCSS variables. In this case, I would expect you might find something useful in node_modules/ionic-angular/components/input/input.scss.

3

Hi rapropos,
I’m sorry, but I still couldn’t figure out how to get it done. Could you help me with an example perhaps?
Kind regards,
Bram

4

Look here.

5

I think he means this variable

I put this in my variables.scss

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic’s
// default are overridden.
$text-input-highlight-color-valid: #3ebfe2;

6

Hi thanks for the fast response!
That’s where I started my quest to find the answer. I searched the input variables but couldn’t find something like “border”.
Doesn’t the text-input-highlight-color just change the color when selected? I’d want to change it on render :slight_smile:
Any thought?

7

I tried all these with “color” in the name :smile:

ion-input

8

But did any of them change the original color? :stuck_out_tongue:

9

Sure! :wink:
My basic color is a sort of blue, then I can’t use the typical green :stuck_out_tongue:

10

Hi, I’m sorry to bother you again, but I’ve changed it in the exact same file as you did and just copy pasted your code but I can’t see any changes. Am I missing something?

11

.item-input-has-focus .label-md[stacked],
.input-has-focus .label-md[stacked],
.item-input-has-focus .label-md[floating],
.input-has-focus .label-md[floating],
{
color: #3df5d6 !important;
}

12

Only change your “primary” color in you variables.scss under theme folder

13

woo it worked. thanks!

14

Are there any documents that summarize these variables? I am not looking for variables that override ionic defaults in variables.css. I want to be able to make changes in a page’s CSS to the highlight colour of an input field but do not want to change the global settings of the app.

I want to be able to override variables.css settings on specific pages for the input field but I couldn’t find anywhere how to do this on a given page’s CSS file. There are also no documents.

16

Yes, there is no documents for this. You have to find the class applied on the element using Inspect Element and override it in the page’s css.

17

Thanks… Sorry newbie here… Can I use Inspect Element when testing with ionic serve on a browser? I will give it a try.

18

Put below code into variables.css file.

$text-input-highlight-color-valid:rgba(0, 0, 255, 0);

$text-input-highlight-color-invalid:rgba(0, 0, 255, 0);

Please give your color here “rgba(0, 0, 255, 0);”.

Let me know if you still face issue.

19

This worked for me in Ionic5 - in my case I had a field that I needed closed for update, and although readonly inhibited keying into the field, I also wanted the valid/invalid bottom border color to be inhibited as well. I didn’t want to use protected as it faded the label and text more than I wanted, so I added my own CSS class closed to the item level

    <ion-item class="closed">
      <ion-label position="floating">Name</ion-label>
      <ion-input type="text" 
                 readonly="readonly"  
                 [(ngModel)]="name"
                 name="name">
      </ion-input>
    </ion-item>

In global.css I added

.closed {
  color:#666;
  --highlight-background: transparent;
}

I hope this helps