本篇教程探讨了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频道!