今天学习了一下百度前端技术学院的课程,感觉很不错
核心要点
1.不要显示原有样式
2.充分利用伪元素,让伪元素去显示想要的样式
3.伪元素的content为''(空字符串)
4.利用伪类:checked,可大大简化代码,不使用js,即可让伪元素在checked时显示对应的样式
相关知识点也在以上链接中
以下附上一个学员的代码,方便拿来主义
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> input[type=radio]{ visibility: hidden; } input[type=radio]:checked::after{ background-image: url('./img/sprite.png'); background-repeat: no-repeat; background-position: -59px -10px; visibility: visible; } input[type=radio]::after{ content: ' '; display: block; height: 20px; width: 20px; background-image: url('./img/sprite.png'); background-repeat: no-repeat; background-position: -24px -10px; visibility: visible; } input[type=checkbox]{ visibility: hidden; } input[type=checkbox]:checked::after{ background-image: url('./img/sprite.png'); background-repeat: no-repeat; background-position: -60px -31px; visibility: visible; } input[type=checkbox]::after{ content: ''; display: block; height: 20px; width: 20px; background-image: url('./img/sprite.png'); background-repeat: no-repeat; background-position: -25px -32px; visibility: visible; } </style> </head> <body> <input type="radio" name="sex" id="male" /><label for="male"> Male</label> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" checked /> <br> <label for="apple">apple</label><input type="checkbox" name="" value="" id="apple"> <br> <input type="checkbox" name="" value="" id="coffee" checked > <label for="coffee">coffee</label><br> <input type="checkbox" name="" value="" id="orange"> <label for="orange">orange</label> <p></p> </body> </html>