用css设计搜索<input>的样式

Question

我正在尝试设置搜索输入框的样式，这样，当用户单击该框时，它将更改为不同的颜色，并删除指示用户已选择文本框的蓝色大纲。

有什么建议或想法吗？谢谢。

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

HTML：

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

Answer 1

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

演示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 */
}

或者更有风格..。

注意，在HTML5中，input type="search" 是一个有效的名称