html5 css3 input,HTML5+CSS3从入门到精通 input 对伪元素(:before :after)的支持情况

本篇教程探讨了HTML5+CSS3从入门到精通 input 对伪元素(:before :after)的支持情况，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

做一个自定义视觉效果的Switch组件，直接用input的微元素就可以实现。

代码如下：

html>

input:before 测试

input:before,

input:after {

content: '';

display: block;

width: 10px;

height: 10px;

outline: 1px solid red;

}

input:after {

width: 15px;

height: 5px;

outline-color: blue;

}

button 

color 

date 

datetime-local 

email 

file 

hidden 

image 

month 

number 

passwork 

range 

reset 

search 

submit 

text 

tel 

time 

number 

url 

week 

datetime 

checkbox 

radio 

input 伪元素支持情况

在 mac Chrome 里打开查看的效果如图：

可以看出来有的input支持有的不支持。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！