电子商务网站建设的背景,戒烟网页设计作品欣赏,班级网站设计模板,潜江做网站这种纯CSS3美化单选按钮radio的方法适用于以下情况#xff1a;
1、可兼容IE9以上#xff0c;需要兼容IE8的要写IE的hack把样式去掉
2、只支持单选按钮radio#xff0c;因为单选按钮选中样式的圆圈可以用CSS做出来#xff0c;但是复选按钮checkbox的选中效果对勾就需要图片…这种纯CSS3美化单选按钮radio的方法适用于以下情况
1、可兼容IE9以上需要兼容IE8的要写IE的hack把样式去掉
2、只支持单选按钮radio因为单选按钮选中样式的圆圈可以用CSS做出来但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库
3、不需要JS支持切换效果
下图是最终效果图 HTML代码 label forman classradio
span classradio-bg/span
input typeradio namesex idman value男 checkedchecked / 男
span classradio-on/span
/label
label forwoman classradio
span classradio-bg/span
input typeradio namesex idwoman value女 / 女
span classradio-on/span
/label CSS代码 .radio{
display: inline-block;
position: relative;
line-height: 18px;
margin-right: 10px;
cursor: pointer;
}
.radio input{
display: none;
}
.radio .radio-bg{
display: inline-block;
height: 18px;
width: 18px;
margin-right: 5px;
padding: 0;
background-color: #45bcb8;
border-radius: 100%;
vertical-align: top;
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s ease;
}
.radio .radio-on{
display: none;
}
.radio input:checked span.radio-on{
width: 10px;
height: 10px;
position: absolute;
border-radius: 100%;
background: #FFFFFF;
top: 4px;
left: 4px;
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
transform: scale(0, 0);
transition: all 0.2s ease;
transform: scale(1, 1);
display: inline-block;
} 这个方法中最重要的是选中效果的类名.radio input:checked span.radio-on 是CSS2的伪类其意义为div p 选择紧接在 div 元素之后的所有 p 元素。
也就是找到选中的:checked的input其之后的类名为radio-on的span元素做选中圆圈效果。 网上有很多美化方法是把label做成了圆圈但是这样的话单选的文字就必须要要放到label的外面这导致了点击文字的时候不能切换单选效果。
所以我在label里加了一个类名为radio-bg的span来专门做后面大的圆圈再用一个类名为radio-on的span来做选中的前面小的圆圈。
这样就保留了点击label里的文字也可以切换单选的效果。
