使用css为<input />设置样式

Question

我正在尝试设置搜索输入框的样式，这样当用户点击进入框时，它会变为不同的颜色，并摆脱指示用户已选择文本框的蓝色轮廓

有任何建议或想法吗？感谢。

jsFiddle：http://jsfiddle.net/7t5AY/

HTML：

<input type="text" id="text-search" placeholder="Search" >

Answer 1

您可以使用:focus选择器，例如：

Demo Fiddle

input[type=text]:focus{
    outline:none; /* removes the blue outline on focus */
    background:lightgrey; /* however you wish to style */
    border:1px solid black; /* however you wish to style */
}

Or more stylishly..

请注意，在HTML5中，input type="search" is a valid designation