- 首页 > it技术 > >
关于input|关于input type radio的自定义样式问题的解决办法
input[type=radio] {
/*去除浏览器默认样式*/
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
/*自定义样式*/
position:relative;
display:inline-block;
width:20px;
height:20px;
border:1px solid red;
outline:none;
cursor:pointer;
/*设置为圆形，看起来是个单选框*/
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
vertical-align:middle;
}
input[type=radio]:after {
content:'';
position:absolute;
width:12px;
height:12px;
display:block;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
background:#17533b;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-webkit-transform:scale(0);
-moz-transform:scale(0);
transform:scale(0);
/*增加一些动画*/
-webkit-transition:all ease-in-out 300ms;
-moz-transition:all ease-in-out 300ms;
transition:all ease-in-out 300ms;
}
input[type=radio]:checked:after {
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
}
推荐阅读
