输入字段后的具体化CSS图标

Question

在MaterializeCSS的文本输入页面中，有一个部分可以在输入字段中加上图标。

<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>标签中。

斯菲德尔