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.

1 Like
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.

1 Like
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;

4 Likes
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;
}

2 Likes
12

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

1 Like
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.

1 Like
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.

2 Likes
17

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

1 Like
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