google MDL textfield focus to change color

问题

I just getting started this google material design lite. And i found this textfield floating when you r focusing in this label. the color is blue or navy or idk.

the problem is, I changed the link color into this color indigo-pink

<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">

but there is no change for my textfield into an indigo color or a pink color when I focused on it.

question is simple, how to change it?

I did something with this, but still have no luck in it.

the HTML:

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample4">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
    <label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

the css:

div .mdl-textfield__label:after {
  background: pink;
}
.mdl-textfield--floating-label .is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
    color:pink;
}

.mdl-color-modifier:focus{
    color:pink;
}

I tried to apply a new class in it with pseudo :focus, but it still have no luck too.

回答1:

I have it all. The keys are the :after modifier and the is-focused class. Just replace #FAFAFA with your indigo-pink and it should work for ya. This is just proof of concept. Check the fiddle. it has the text label colored too.

.mdl-textfield.is-focused .mdl-textfield__label {
    color: #FAFAFA;
}

.mdl-textfield__label:after{
    background-color: #FAFAFA;
}

https://jsfiddle.net/90u6Lxc4/30/

回答2:

I believe an alternate solution would be like this, it worked for me:

.mdl-textfield__input:focus {
    border-bottom-color: red;
    box-shadow: 0 1px 0 0 red;
}

I deducted the answer from here.

来源：https://stackoverflow.com/questions/40992507/google-mdl-textfield-focus-to-change-color

标签

html

css

material-design

material-design-lite