怎么在input里加图标
时间: 2024-03-13 19:47:41 浏览: 129
在input中右边加上一个图标的css样式
在`<input>`标签中添加图标,可以使用CSS的伪类`::before`或`::after`来实现。以下是一个示例代码:
HTML代码:
```
<div class="input-with-icon">
<input type="text" placeholder="请输入内容">
</div>
```
CSS代码:
```
.input-with-icon input[type="text"] {
padding-left: 30px; /* 设置左边距,留出位置放置图标 */
}
.input-with-icon::before {
content: "\f007"; /* 设置图标内容 */
font-family: "FontAwesome"; /* 设置字体 */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
```
以上代码中使用了Font Awesome字体库来引用图标,需要在HTML中引入相关的CSS和字体文件。
阅读全文