教你在输入框中添加图标
导读： 输入框(input 聚焦 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。 使用 :focus 选择器可以设置输...
输入框(input) 聚焦
默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none;
来忽略该效果。
使用 :focus 选择器可以设置输入框在获取焦点时的样式：
CSS 实例
input[type=text]:focus {
background-color: lightblue;
}
CSS 实例
input[type=text]:focus {
border: 3px solid #555;
}
输入框(input) 图标
如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：
CSS 实例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 教你在输入框中添加图标
本文地址： https://pptw.com/jishu/664015.html