input、button可以通过CSS自定义外观,而checkbox radio则没办法通过CSS自定义样式。今天逛GOOGLE+的时候发现了一个利用CSS3伪元素:after来自定义checkbox radio样式的方法。利用CSS3不仅可以自定义checkbox radio的边框或背景还可以改变选中时的样式。具体看以下代码:
CSS代码:
- input[type=checkbox],
- input[type=radio] {
- -webkit-appearance: none;
- appearance: none;
- width: 13px;
- height: 13px;
- margin: 0;
- cursor: pointer;
- vertical-align: bottom;
- background: #fff;
- border: 1px solid #dcdcdc;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- border-radius: 1px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- }
- input[type=checkbox]:active,
- input[type=radio]:active {
- border-color: #c6c6c6;
- background: #ebebeb;
- }
- input[type=checkbox]:hover {
- border-color: #c6c6c6;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
- }
- input[type=radio] {
- -webkit-border-radius: 1em;
- -moz-border-radius: 1em;
- border-radius: 1em;
- width: 15px;
- height: 15px;
- }
- input[type=checkbox]:checked,
- input[type=radio]:checked {
- background: #fff;
- }
- input[type=radio]:checked::after {
- content: ”;
- display: block;
- position: relative;
- top: 3px;
- left: 3px;
- width: 7px;
- height: 7px;
- background: #666;
- -webkit-border-radius: 1em;
- -moz-border-radius: 1em;
- border-radius: 1em;
- }
- input[type=checkbox]:checked::after {
- content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);
- display: block;
- position: absolute;
- top: -6px;
- left: -5px;
- }
- input[type=checkbox]:focus {
- outline: none;
- border-color:#4d90fe;
- }
用到的图片
具体效果: