Поля ввода Material Design Lite Styling

У меня возникли некоторые трудности со стилем mdl-textfield. В частности, размер и цвет плавающей метки, а также высота и цвет анимации после нажатия на поле ввода.

По сути, это моя отправная точка, взятая из списка компонентов.

https://jsfiddle.net/2aznyc4n/1/

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

Я могу установить размер и цвет плавающей метки, добавив в метку в html

style="font-size:x-large; color:purple"

Так это какая-то ошибка, что это не действует, когда метка становится плавающей, если это установлено в css? Если я установлю стиль в html и в css, то оба они внезапно подействуют. Я просто не могу уложить это в голове.

Если все возможно, я хочу избежать стилей в своем html.

Я копался в исходном коде, но мне не удалось выяснить стиль цвета и высоты mdl-js-textfield.


material-design-lite
person Martin    schedule 04.05.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Настройка MDL немного утомительна. В начале вы можете выбрать свой основной и акцентный цвет и иметь набор полезных и красивых компонентов, но когда вам нужно немного настроить что-то, возникают трудности.

Я искал исходный код MDL, чтобы найти, какие классы добавили стиль цвета и размера шрифта. Я решил необходимость настроить цвет и размер шрифта плавающего входного текста, добавив этот хакерский код в свой css.

  .mdl-textfield{ input[type="text"]{ font-size: 24px; color: @color500;} }
  .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{
    font-size: 14px;
    top: -5px; //Manages floating label fly
  }
  .mdl-textfield__label{ font-size: 24px; top: 20px; color: @color500;}
person David Merino    schedule 25.08.2016

arrow_upward
0
arrow_downward

Обычно настройку следует выполнять с помощью пользовательской сборки темы CSS.

Но если вы предпочитаете использовать свой собственный css, вам следует использовать !important.

.mdl-textfield__input {
   color: black !important;
 }

Для текста-заполнителя вам нужно использовать префикс поставщика CSS:

::-moz-placeholder {  /* Firefox 19+ */
 color: red !important;  
}

::-webkit-input-placeholder {
  color: red;

}

person hr_117    schedule 04.05.2016

arrow_upward
0
arrow_downward

Я действительно много боролся, особенно с цветом нижней границы после анимации, но, к счастью, после некоторых исследований я смог вычесть решение, упомянутое здесь (запрещено дублировать ответы, поэтому я предпочитаю прямую ссылку на него):

https://stackoverflow.com/a/43512625/1920145

Надеюсь, это поможет еще многим людям.

person DavidTaubmann    schedule 20.04.2017