MDL - 文本字段在中间显示底线

Question

文本字段的底线显示在上方。没有 CSS 使用 ...

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
  <label class="mdl-textfield__label" for="phone">Phone</label>
  <span class="mdl-textfield__error">Digits only</span>
</div>

<form action="#">
  <div class="mdl-textfield mdl-js-textfield">

    <input class="mdl-textfield__input" type="text" id="demo-input" />

    <label class="mdl-textfield__label" for="demo-input">UserName...</label>
  </div>
 </form>

Take a look at what I got

Answer 1

看看我为下面的 Whosebug 线程发布的答案。

Material Design Lite - Bottom Line in text field has a slight gap with colored line

MDL - 文本字段在中间显示底线

MDL - Text field shows bottom line in middle

material-design

material-design-lite