该手记通过简单教程，实现如图所示的radio单选样式效果
html结构，div中包含一个radio单选框与一个指向该单选框的label标签
苹果
初始化相关结构样式，设置div定位为relative，radio与label为absolute定位
.radio-check {
position: relative;
height: 35px;
}
.radio-check > input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height:20px;
opacity: 0;
}
.radio-check > label {
position: absolute;
left: 30px;
line-height: 20px;
top: 0px;
}
通过伪类::before与::after，实现选中效果
初始化before与after状态
.radio-check > label:before {
content: ”;
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check > label:after {
content: ”;
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
margin-left: 6px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
利用radio选中状态的:checked伪类选择器与兄弟选择器，实现选中效果
.radio-check input[type=’radio’]:checked + label:before {
border-color: #4cd764;
}
.radio-check input[type=’radio’]:checked + label:after {
background: #4cd764;
}
整体代码示例
Examples
.radio-check {
position: relative;
height: 35px;
}
.radio-check > input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height:20px;
opacity: 0;
}
.radio-check > label {
position: absolute;
left: 30px;
line-height: 20px;
top: 0px;
}
.radio-check > label:before {
content: ”;
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check > label:after {
content: ”;
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
margin-left: 6px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check input[type=’radio’]:checked + label:before {
border-color: #4cd764;
}
.radio-check input[type=’radio’]:checked + label:after {
background: #4cd764;
}
苹果
橘子
梨
香蕉
菠萝
今天的文章css中radio单点,css3实现radio选择效果分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/32718.html
