Материал Дизайн Lite динамически меняет цвет

Question

Я использую Material Design Lite (getmdl.io) для своего веб-приложения. У меня есть текстовое поле с плавающей точкой label;

Я хочу изменить цвет подчеркивания текстового поля на собственный цвет, а не тот, который я определил как основной цвет (строка, которая появляется при фокусировке текстового поля).

Как я могу изменить этот цвет с помощью CSS или Javascript?

Edit:

Это как реализуется текстовые поля MDL, но некоторый JS используется для выполнения динамического подчеркивания на дне.

Вы также можете увидеть пример в движении here

<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="sample3"> 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
    </div> 
</form> 

Answer 1

Поскольку вы используете MDL и не регулярные Materialize.CSS, и выполнив несколько тестов, что линия идет от этого сценария:

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 

MDL предоставляет 19 возможных цветов, которые вы можете добавить, добавив --color в класс, где элемент, который вы хотите изменить.

Но это для background-color в элементе, в этом случае он применяется к псевдо элемент ::after, так что вы можете использовать собственный цвет, как вы хотите с помощью цвета teal

div .mdl-textfield__label:after { 
 
    background: teal 
 
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
<form action="#"> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
    <input class="mdl-textfield__input" type="text" id="sample3"> 
 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
 
    </div> 
 
</form>

Здесь является уже существующим Codepen со всеми возможными цветами

Вы всегда можете создать собственную тему here

Answer 2

.mdl-textfield__label:after{ 
    background-color: #3f51b5 !important; 
} 

Не уверен, что если !important необходимо, но это очень удобно при изменении основы CSS.

Answer 3

Вы можете изменить цвет плавающего текста. Не нужно взламывать фоновый цвет. Вот ваши доступные цвета (и коды MDL) - https://rack.pub/swatch.

mdl-color-text--yellow-500

https://codepen.io/rhroyston/pen/YWVBkJ