radio
/**
* 单选框自定义样式
**/
input[type=radio]{
/*去除浏览器默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*自定义样式*/
position: relative;
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
border: 1px solid #00bfff;
outline: none;
cursor: pointer;
/*设置为圆形,看起来是个单选框*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
content: '';
position: absolute;
width: 12px;
height: 12px;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #00bfff;
-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);
}
checkbox
input[type=checkbox]{
margin: 50px;
/*同样,首先去除浏览器默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*编辑我们自己的样式*/
position: relative;
width: 20px;
height: 20px;
background: transparent;
border:1px solid #00BFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
outline: none;
cursor: pointer;
}
input[type=checkbox]:after{
content: '√';
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #00BFFF;
color: #fff;
text-align: center;
line-height: 18px;
/*增加动画*/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
/*利用border-radius和opacity达到填充的假象,首先隐藏此元素*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity: 0;
}
input[type=checkbox]:checked:after{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
opacity: 1;
}
checkbox 开关模式
input[type=checkbox]{
/*同样,首先去除浏览器默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*编辑我们自己的样式*/
position: relative;
background: #fff;
border: 1px solid #00BFFF;
width: 56px;
height: 28px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/*增加动画*/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
outline: none;
cursor: pointer;
}
input[type=checkbox]:after{
content: 'off';
position: absolute;
left: 2px;
top: 2px;
display: block;
width: 22px;
height: 22px;
background: #00BFFF;
color: #fff;
text-align: center;
line-height: 22px;
/*增加动画*/
-webkit-transition: all ease-in-out 300ms;
-moz-transition: all ease-in-out 300ms;
transition: all ease-in-out 300ms;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 12px;
}
input[type=checkbox]:checked{
background: #00BFFF;
}
input[type=checkbox]:checked:after{
content: 'on';
left: 30px;
background: #fff;
color: #00BFFF;
}
appearance 属性介绍
appearance是css3的属性,他的意思是使得标签的样式像他设定的参数一样;
他总共有7个参数;
normal->> 将元素呈现为常规元素。
icon->> 将元素呈现为图标(小图片)。
window->> 将元素呈现为视口。
button->> 将元素呈现为按钮。
menu->> 将元素呈现为一套供用户选择的选项。
field->> 将元素呈现为输入字段。
none->> 去除浏览器默认样式
:checked伪类介绍
:checked同样是css3中的一个伪类,他的作用是某个标签被选中时来使用的,使用方法和:hover :active :link这些伪类一样;
上面我在radio后面加了一个伪类:after,他要稍微比定义的单选框要小点,这样显示出来更加美观一点,在未选中之前让他scale(0),然后配合动画,在选中的时候scale(1),这样就有一个渐变填充的动画了;