Material Design Lite динамически меняет цвет

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

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

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

Изменить:

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

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

<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>

javascript material-design css material-design-lite
person tommybond    schedule 13.06.2016    source источник
comment
Вы можете показать, как MDL реализует текстовое поле?   -  person Bonsai    schedule 13.06.2016
comment
@XZKS я отредактировал с примерами   -  person tommybond    schedule 14.06.2016
comment
Проверьте веб-инструмент в Chrome и установите :focus на этом и добавьте к нему !important, чтобы убедиться :)   -  person Medda86    schedule 14.06.2016
comment
@ Medda86 Medda86 Я даже не знаю, какое свойство установить или как его установить, к сожалению.   -  person tommybond    schedule 14.06.2016
comment
@tommy.bonderenka не уверен, что вы уже проверили, но я обновил свой ответ, просто к вашему сведению, он немного завершен :)   -  person dippas    schedule 14.06.2016
comment
@dippas большое спасибо!   -  person tommybond    schedule 14.06.2016

Ответы (3)


arrow_upward
5
arrow_downward

Поскольку вы используете 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 со всеми возможными цветами

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

person dippas    schedule 13.06.2016
comment
Это работает до некоторой степени, но теперь я получаю свой собственный цвет и основной цвет, подчеркивая поле ввода текста. - person tommybond; 14.06.2016
comment
хотите поделиться ссылкой, чтобы помочь вам? - person dippas; 14.06.2016
comment
К сожалению, у меня нет способа сделать это. Я заметил, что вы используете Materialize вместо MDL, поэтому я предполагаю, что это как-то связано с этим. - person tommybond; 14.06.2016
comment
Да, я только что посмотрел документы - определенно немного отличается, но близко! - person tommybond; 14.06.2016
comment
@tommy.bonderenka Хорошо, позвольте мне посмотреть документы MDL. Я свяжусь с вами как можно скорее. - person dippas; 14.06.2016
comment
Сейчас я просматриваю здесь в файле css текстового поля, но я не вижу ничего, связанного с контуром или границей, связанной с фокусом или: фокусом - person tommybond; 14.06.2016
comment
ой! было ошибкой! ха - person tommybond; 01.07.2016

arrow_upward
3
arrow_downward 

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

Не уверен, что !important необходим, но он пригодится при изменении CSS-фреймворка.

person yuriy636    schedule 13.06.2016
comment
Это именно то, что я искал! Спасибо! - person tommybond; 14.06.2016
comment
Вы знаете, как изменить цвет текста? Это творило чудеса, но мне нужна помощь здесь. jsfiddle.net/90u6Lxc4/5, чтобы сделать его белым после клика, а не белым все время, как @ Мне бы РонРойстон подошел. - person Billy Ferguson; 31.08.2017
comment
@BillyFerguson, вы имеете в виду текст метки или вводимый текст? - person yuriy636; 31.08.2017
comment
Текст плавающей метки, который в настоящее время темно-синий, меняется, когда вы нажимаете на ввод. - person Billy Ferguson; 31.08.2017
comment
@BillyFerguson .mdl-textfield.is-focused .mdl-textfield__label { color: #FAFAFA; } jsfiddle.net/yuriy636/vey6081L - person yuriy636; 31.08.2017
comment
однако нам не нужно перезаписывать исходный стиль.jsfiddle.net/vey6081L/3 - person Billy Ferguson; 01.09.2017

arrow_upward
2
arrow_downward

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

mdl-color-text--yellow-500

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

person Ronnie Royston    schedule 02.07.2016