Html 使用无网格的物化css会导致输入占位符未对齐

我使用的是没有网格系统的ECS。 然而，这使得我的输入字段占位符文本已经离开：0.75rem；风格 这是materialize中的一个bug还是我做错了什么？ 下面是小提琴和代码

     <div class="card">
     <div class="card-content">
        <form>
           <div class="input-field">
              <input id="icon_prefix" type="text" class="validate">
              <label for="icon_prefix">First Name</label>
           </div>
           <div class="input-field">
              <input id="icon_telephone" type="tel" class="validate">
              <label for="icon_telephone">Telephone</label>
           </div>
        </form>
     </div>
     <div class="card-action">
        <button class="btn waves-effect waves-light">
           Login
        </button>
     </div>

名字
电话
登录

这个问题可以通过一个小小的css技巧来解决

HTML：

<div class="input-field placeholded">
    <input id="icon_telephone" type="tel" class="validate" placeholder="+33642424242">
    <label for="icon_telephone">Telephone</label>
</div>

---

谢谢我的修复有点不同，但这也应该有效

.placeholded label {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%);
}