css如何自定义radio单选框样式 ？（代码完成）
发表时间：2025-10-27 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于css如何自定义radio单选框样式 ？（代码实现），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
html部分
<div class="radio">
<label>
<input name="feel" type="radio" value="love" />
<span class="pos">
<span class="radio_bg">
<span class="radio_on"></span>
</span>
</span>
<span>LOVE</span>
</label>
<label>
<input name="feel" type="radio" value="hate" />
<span class="pos">
<span class="radio_bg">
<span class="radio_on"></span>
</span>
</span>
<span>YOU ARE NICE</span>
</label>
</div>css样式部分
.radio {
width: 260px;
height: 26px;
line-height: 26px;
margin: 200px auto;
background-color: #ddeef1;
font-size: 16px;
color: #495060;
text-align: center;
}
label:first-child {
margin-right: 40px;
}
label input, .radio_on {
display: none;
}
.pos {
display: inline;
vertical-align: middle;
}
.radio_bg {
position: relative;
display: inline-block;
height: 14px;
width: 14px;
border: 1px solid #B3B4B8;
border-radius: 50%;
}
label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
border: 1px solid #27B28B;
}
label input:checked + span.pos span.radio_bg .radio_on {
display: inline-block;
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #27B28B;
}效果图
相关推荐：
HTML的checkbox和radio怎样美化样式
使用CSS自定义radio、checkbox样式的示例详解
以上就是css如何自定义radio单选框样式 ？（代码实现）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
