Question

在MaterializeCSS的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>部分移动到下一行。

Answer 1

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;
}

并将其添加到要右对齐的<i>标签中。

jsfiddle

输入字段后的MaterializeCSS图标

1 个答案: