代码之家 › 专栏 › 技术社区 › Bijan

输入字段后的ECSS图标

materialize css

1

Bijan · 技术社区 · 8 年前

Text Input 页面有一个部分,用于在输入字段前添加图标。

    <div class="input-field col s6">
      <i class="material-icons prefix">account_circle</i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">First Name</label>
    </div>

有没有办法让图标位于输入字段之后?

我试了一个 suffix css类,它不存在。同时移动 <i class="material-icons">account_circle</i> 输入/标签后的节将图标移动到下一行。

1 回复 | 直到 8 年前

1

4

Bahman Parsa Manesh 8 年前

Materialize为创建了这个类 .prefix :

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    top: .5rem;
}

您可以在css中覆盖它并添加 right: 0

.input-field .prefix{
  right: 0;
}

更清洁的解决方案是添加 right 归类于 <i>

.input-field .prefix.right{
  right: 0;
}

并将其添加到 < 要右对齐的标记。

jsfiddle