表单样式
在写表单样式的时候是比较烦人的,因为各浏览器下的效果都不一样,所以在以前都会使用图片来进行解决,并且很多时候还需要JS的辅助。当然,那是为了兼容所有浏览器,但我们如果只需要兼容一些高级浏览器或者只需要考虑移动端的话,则不需要想这么多,因为CSS3是如此强大。
我想说什么呢?说不清楚只好先上demo了:
See the Pen tHyLK by blwoosky (@blwoosky) on CodePen.
是的,就是实现上面的效果,不用js,纯CSS就可以实现。
:checked与+相邻选择器
CSS3中有针对checkbox
和radio
的伪类选择器,例如:
input:checked{ /*......*/ }
相信选择器,即选择元素的下一个相邻的元素,例如选择class
为a
的下一个b
标签元素:
.a+b{ /*......*/ }
这样,我们就可以选择checkbox
或者radio
的相邻元素,对它进行添加样式。
一般会有一个label
和checkbox
、radio
同时出现:
<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.
好像很久以前在逛老外的博客的时候就看到这个方法了,只是现在才用到而已~~