MDL - Text字段显示中间的底线

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>

看看我得到了什么

Answer 1

看看我为下面的堆栈溢出线程发布的答案。

文本字段中的“材料设计”Lite -底线与彩色线条之间有轻微的差距。