select、input为什么不能使用after before

  before和:after伪元素指定生成的内容的样式和位置。如其名所示,:before和:after伪元素指定了一个元素文档树内容之前和之后的内容
'content'属性,与这些伪元素联用,指定了插入的内容。

  以我的理解来看,「一个元素文档树内容之前和之后的内容」就是指这个元素是要可以插入内容的,也就是说这个元素要是一个容器。
作为DOM元素,伪元素都是在容器内进行渲染的。input,img,select无法容纳其他元素,因此它不支持伪元素。
至于Chrome 中checkbox和radio可以插入,那应该是Bug了。

参考官方文档:https://www.w3.org/TR/CSS21/generate.html#before-after-content

 

posted @ 2018-01-05 17:48  MF孟飞  阅读(7263)  评论(0编辑  收藏  举报