css在输入框中加图标

CSS可以让我们在输入框中加入图标，让我们的页面更加美观和流畅。

input[type="text"]{
    padding-left:20px;
    background-image:url('search_icon.png');
    background-repeat:no-repeat;
    background-position:left center;
}

上面的代码中，我们使用了CSS属性background-image来加入了搜索图标的图片。我们还使用了background-repeat和background-position属性来控制图标的显示位置和重复方式。

如果要添加另一个图标，比如清除输入框内容的图标，可以使用如下代码：

input[type="text"]{
    padding-left:20px;
    background-image:url('search_icon.png'), url('clear_icon.png');
    background-repeat:no-repeat, no-repeat;
    background-position:left center, right center;
}
    

在上面的代码中，我们把搜索图标和清除图标都添加到了输入框的背景中。同时也分别指定了它们的位置和是否重复显示。

总之，CSS可以在输入框中应用图标，并且可以使用很多属性来控制图标的样式和位置，让我们的页面更加炫酷和直观。

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