css取代radio的样式

最新推荐文章于 2021-04-07 09:42:40 发布

bug大师

最新推荐文章于 2021-04-07 09:42:40 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_43492777/article/details/100774918

css 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用CSS为单选框设计动态且美观的样式，包括隐藏默认样式、创建自定义图标，并通过:checked伪类实现选中状态的视觉反馈。

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

.hide-radio{
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
隐藏单选
.edf-line .checkbox_ico {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
transform: translate(0, -50%);
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #e7e7e7;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.edf-line .checkbox_ico:before {
content: “”;
display: block;
top: 2px;
left: 2px;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #4ea3fd;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
}
单选框的样式

input:checked ~ .checkbox_ico {
    border-color: #4ea3fd;
}

这个比较少见这东西可以改变选中的类的样式
还是比较少见的
在这里插入图片描述