css在输入框中加入图标

CSS是前端开发中必不可少的一项技术。在输入框中加入图标是一项不错的设计，可以为页面增添不少美观程度。下面我们来看看如何使用CSS实现此效果。

HTML代码如下：input type="text" class="icon-input" />
CSS样式如下：.icon-input{
    border : 1px solid #ccc;
    padding : 8px 30px 8px 8px;
    background : url('icon.png') no-repeat scroll right center;
}
.icon-input:focus{
    outline:none;
    border-color:#719ECE;
    box-shadow:0 2px 12px rgba(0,0,0,.1) inset, 0 0 0 2px #D7E7F9 inset;
}
    

在HTML中我们使用标签来定义输入框，通过添加class名称来定义样式。CSS样式中我们使用了border、padding、background等CSS属性来定义输入框的样式。

其中，background属性用于添加图标，我们使用了url('icon.png')来指向图标的位置，并在后面加上no-repeat scroll right center来指定图标的位置在右侧居中。

为了让输入框在获取焦点时有更好的视觉效果，我们使用了:focus伪类来定义获取焦点时的样式，这里我们对边框和阴影进行了设计，可以根据实际需求进行修改。

这样，加入图标的输入框就完成了。如果要使用不同的图标，只需要更改CSS中background属性中url()内的图片地址即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！