input:focus {...} //当input元素获得焦点时就会套用这个样式
也就是说当input元素失去焦点就会恢复为原来的样式。因此只需给同一类元素设置默认样式和获得焦点时的样式即可实现你的目的。
CSS :focus
:focus 选择器用于选取获得焦点的元素。
提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
所有主流浏览器都支持 :focus 选择器。
注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。
<html><head>
<style>
input:focus
{
background-color:yellow
}
</style>
</head>
<body>
<p>在文本框中点击，您会看到黄色的背景：</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
</body>
</html>
1、标签选择器（如：body,div,p,ul,li）。
2、.类选择器（如：class="head",class="head_logo"） 。
3、ID选择器（如：id="name",id="name_txt"）。
4、全局选择器（如：*号）。
5、.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。
6、.继承选择器（如：div p,注意两选择器用空格键分开）。
7、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）。
8、字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 。
扩展资料：
css选择器的基本定义是：每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
说了这么一大段话，其实简而言之，就是要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，html页面中的元素就是通过CSS选择器进行控制的。
参考资料来源：百度百科—css选择器
