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

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

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