Material Design - removing / changing floating style

Hello everyone,

how do I remove this blue line under my input?

For instance we have the following form:


I want to remove this blue line and I also want another color for the label text when it appears on the top.

Hey there!

I don’t know if this is the appropriate way of doing it, but i found a workaround (using the element inspector from Chrome). I just added this to my .scss file:

# this is the label color ion-list .item .item-inner .input-wrapper ion-label{ color: #ffffff; }

# this is the border/line color ion-list .item .item-inner{ border-bottom: 2px solid #5DA2AD; }

To change the color after you clicked on the input, just add .input-has-focus.

Hope it works for you!

Thanks, but it didn’t work. I want this to change when the input gets focused.

For the label color I found the solution:

I removed floatingand now I’m using stacked and then my html looks like this:

<ion-label stacked sun>Username</ion-label>

where sun is the color of my label.

This solves the problem with the label color.

For the underline issue, when the field gets focused I don’t want the underline (border-bottom), the border-bottom should not show up when the input gets focused.

Here we go, that is the answer:

for the label: $label-md-text-color-focused: "some color"

for the border-bottom of the input: $text-input-md-highlight-color: "some color";


You just put this on you scss like that ?

$label-md-text-color-focused: #ffffff;
$text-input-md-highlight-color: #ffffff;

Has anyone found the solution to remove this default blue border from textarea?

Guys the above solutions worked for me, when the input was focused. When you lose focus I always get a green color on the bottom border. What is they key on the sass variables to change that?

Thank you