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";
4 Likes
You just put this on you scss like that ?
$label-md-text-color-focused: #ffffff;
$text-input-md-highlight-color: #ffffff;
2 Likes
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