Question

我在设计mdl-textfield方面遇到了一些困难。具体来说，浮动标签的样式大小和颜色，以及按下输入字段后动画的高度和颜色。

实际上，这是我的起点，从组件列表中可以看出。

<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颜色和高度的样式。

Answer 1

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

Answer 2

通常，应使用custom CSS theme builde进行自定义。

但如果您更喜欢使用自己的CSS，则应使用!important。

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

对于pleaceholder文本，您需要使用供应商前缀CSS：

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

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

}

Answer 3

在动画之后，我真的特别喜欢底部边框颜色，但幸运的是经过一些研究我可以推断出这里提到的解决方案（禁止复制答案，所以我宁愿直接链接到它）：< / p>

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

希望它可以帮助更多的人。

Material Design Lite样式输入字段

3 个答案: