表单样式

在写表单样式的时候是比较烦人的,因为各浏览器下的效果都不一样,所以在以前都会使用图片来进行解决,并且很多时候还需要JS的辅助。当然,那是为了兼容所有浏览器,但我们如果只需要兼容一些高级浏览器或者只需要考虑移动端的话,则不需要想这么多,因为CSS3是如此强大。

我想说什么呢?说不清楚只好先上demo了:

See the Pen tHyLK by blwoosky (@blwoosky) on CodePen.

是的,就是实现上面的效果,不用js,纯CSS就可以实现。

:checked与+相邻选择器

CSS3中有针对checkboxradio的伪类选择器,例如:

input:checked{ /*......*/ }

相信选择器,即选择元素的下一个相邻的元素,例如选择classa的下一个b标签元素:

.a+b{ /*......*/ }

这样,我们就可以选择checkbox或者radio的相邻元素,对它进行添加样式。

一般会有一个labelcheckboxradio同时出现:

<p>
	<input type="radio" name="sex" value="男" id="male"><label for="male">男</label>
</p>
<p>
	<input type="radio" name="sex" value="女" id="female"><label for="female">女</label>
</p>

既然我们不能直接对类似于radio这样的元素进行有效的控制样式,那么我们可以对它后面的label进行修饰,例如:

radio:checked+label{ background:red; }

这样就会把选中的单选按钮所对应的label的背景色变成红色,就像这样:

See the Pen yckAJ by blwoosky (@blwoosky) on CodePen.

自定义样式

我们可以为所欲为的控制:checked后面元素的样式,比如,给label的:before,:after添加样式:

See the Pen tHyLK by blwoosky (@blwoosky) on CodePen.

好像很久以前在逛老外的博客的时候就看到这个方法了,只是现在才用到而已~~