Custom color of input underline

[zigy]

Please can you add custom color of input underline animation to css?
Default is blue... i need orange 😋

[bsteephenson]

In bin/materialize.css

textarea:focus {
  border-bottom: 1px solid #03a9f4;
  -webkit-box-shadow: 0 1px 0 0 #03a9f4;
  -moz-box-shadow: 0 1px 0 0 #03a9f4;
  box-shadow: 0 1px 0 0 #03a9f4;
}

You can replace the color code with whatever you want to change the underline.

textarea:focus {
  border-bottom: 1px solid orange;
  -webkit-box-shadow: 0 1px 0 0 orange;
  -moz-box-shadow: 0 1px 0 0 orange;
  box-shadow: 0 1px 0 0 orange;
}

Would be great if we could do this programatically.

[acburst]

We are thinking of a way to do this programmatically but for now you should just overwrite it in your own CSS. Its best not to alter our CSS file if you ever intend on updating

[zigy]

Thanks a lot :)

[Dogfalo]

Documentation and Sass variables added.

[ghost]

Is there a way to do it programatically ?

[gauravbankoti]

Bro its not working

[greg-mckeon]

Not sure why, but this works for me:
.input-field textarea[class=materialize-textarea]:focus {
border-bottom: 1px solid #2196f3;
box-shadow: 0 1px 0 0 #2196f3;
}

[shinux]

i customized the border color by (lang=pug):

input[type=text]
  &:focus:not([readonly])
    border-bottom: 1px solid #0C8CF6
    box-shadow: 0 1px 0 0 #0C8CF6

[piq9117]

Theres a guide how to target the input elements. How about the textarea? How do I change it?

update:
I targeted the default ID.

#textarea1:focus {
  border-bottom: 1px solid red;
  box-shadow: 0 1px 0 0 red;
}

#textarea1:focus + label {
  color: red;
}

[vTrip]

Is there any update on this ?

[gauravbankoti]

you can change underline color by changing CSS of on focus event.

…

On Mon, May 15, 2017 at 1:08 PM, Vince Tripodi ***@***.***> wrote: Is there any update on this ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#192 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQKplbDd_2wQK1h4RL2zFcqAleo5FU1cks5r6ADagaJpZM4DEs6_> .

[vTrip]

I have done this, except the existing border applied from the mdl is present with the border style I apply

.mdl-textfield__input:focus

[mateusbfroemming]

in: theme/variables.css add this code:

$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;

but select a color!

[ray-den]

try this. its work for me fine:

.input-field input:focus + label {
color: red !important;
}

.row .input-field input:focus {
border-bottom: 1px solid red !important;
box-shadow: 0 1px 0 0 red !important
}