通过CSS3伪类，美化Radio按钮样式

最新推荐文章于 2023-10-27 15:41:19 发布

转载最新推荐文章于 2023-10-27 15:41:19 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/anhuidu/p/4485570.html

本文介绍如何使用CSS3来自定义HTML中的Radio按钮样式，并通过伪元素实现选中状态的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3样式：

/* RADIO */
.button-holder {
width: 100%;
}
.regular-radio {
display: none;
}
.regular-radio + label {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}
.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}