[前端]css 伪类:checked属性剖析

背景：
   :checked伪类选择器，和其它伪类一样，很好理解，就是设置选中时的元素状态。但是在测试中发现给radio设置样式边框或背景时都无效，一度怀疑它是否生效，所以深入了解了下。下面分享下关于:checked相关知识分享一下。
官方说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked

误区： :checked伪类选择器，不止radio,checkbox的选择，option的选中也生效

:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio" />),    checkbox (<input type="checkbox" />) 或("select") 元素中的option HTML元素("option")。

/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
:checked { 
  margin-left: 25px; 
  border: 1px solid blue; 
}

注：上复代码会选中radio(单选按钮),checkbox(复选框),或者option(select中的一项)
代码测试结果：margin-left 单选、复选、option都有效. 但边框样式单选按钮，复选按钮都不生效。option会生效。

又使用了下述代码，设置了box-shadow样式

:checked {
  box-shadow: 0 0 0 3px orange;
}

测试结果：单选、复选、option对于box-shadow样式都生效

总结:    
 1.  checked确实和我们相像中一样简单，就是设置选中时的元素状态。支持radio,checkbox及option  
 2.  radio、checkbox的默认样式正常情况下，不能修改，但也是可以修改的。详细修改方法参考：http://bugshouji.com/mybird/t1054

转载请写明出处
网址：http://bugshouji.com/mybird/t1053