本文摘自PHP中文网,作者V,侵删。
我们直接来看一下具体的实现代码:
(如果您想学习css,那么这里向您推荐css视频教程)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< link rel = "stylesheet" href = "./reset.css" >
< style >
.radio-diy .radiocircle {
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
.radio-diy input:checked+span {
border: 1px solid#008c8c;
}
.radio-diy input:checked~span {
color: #008c8c;
}
.radio-diy input:checked+span.radiocircle::after {
content: "";
display: block;
width: 6px;
height: 6px;
background: #008c8c;
border-radius: 50%;
cursor: pointer;
margin-left: 3px;
margin-top: 3px;
}
input[type="radio"] {
display: none;
}
</ style >
</ head >
< body >
请选择性别:
< label >
< input type = "radio" name = "gender" value = "male" >
< span ></ span >
< span >男</ span >
</ label >
< label >
< input type = "radio" name = "gender" value = "female" >
< span ></ span >
< span >女</ span >
</ label >
</ body >
</ html >
radio.css
|
效果展示:
阅读剩余部分
相关阅读 >>
css link与import的区别是什么
如何在css中实现并排生成多行的dt和dd
css中focus选择器有什么用
css box-direction属性怎么用
css如何禁止复制
最受欢迎的10大css框架
css中有哪些属性可以继承
css 绝对定位是什么
关于css样式表及多重样式优先级的介绍
怎样让前端界面自动清理js、css文件的缓存
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 使用css样式制作单选框