输入框(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;

　　

　　}