1.radio
/* radio */
input[type="radio"]:checked {
background:url(../images/check2.png) -1px -2px;
background-size: 15px;
border:#00A0E9 1px solid;
}
input[type="radio"] {
-webkit-appearance: none;
border: 1px solid #00A0E9;;
height: 15px;
width: 15px;
outline: none;
vertical-align: middle;
cursor: pointer;
}
关于radio还有一种在点击打开链接上看到,这里先拿过来记录一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fancy-radio {
display: block;
font-weight: normal;
}
.fancy-radio input[type="radio"] {
display: none;
}
.fancy-radio input[type="radio"] + span {
display: block;
cursor: pointer;
position: relative;
font-size: 13px;
}
.fancy-radio input[type="radio"] + span i {
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
position: relative;
bottom: 1px;
content: "";
border: 1px solid #ccc;
width: 18px;
height: 18px;
margin-right: 5px;
}
.fancy-radio input[type="radio"]:checked + span i:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
position: relative;
top: 3px;
left: 3px;
content: '';
width: 10px;
height: 10px;
background-color: #99a1a7;
}
</style>
</head>
<body>
<label class="fancy-radio">
<input name="gender" value="male" type="radio">
<span><i></i>Male</span>
</label>
<label class="fancy-radio">
<input name="gender" value="female" type="radio">
<span><i></i>Female</span>
</label>
</html>
2.checkbox
/* checkbox */
input[type=checkbox] {
position: relative;
}
input[type=checkbox]::before{
content:'';
position: absolute;
width: 18px;
height: 18px;
top: -4px;
background: url("../images/check1.png") no-repeat;
}
input[type=checkbox]:checked::before {
background: url("../images/check2.png") no-repeat;
content: '';
}
关于checkbox还有一种在http://demo.cssmoban.com/cssthemes4/tid_5_klorofil/index.html上看到在这里先拿过来记录一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fancy-checkbox {
display: block;
font-weight: normal;
}
.fancy-checkbox input[type="checkbox"] {
display: none;
}
.fancy-checkbox input[type="checkbox"] + span {
margin-right: 0;
}
.fancy-checkbox input[type="checkbox"] + span {
display: inline-block;
vertical-align: middle;
cursor: pointer;
position: relative;
font-size: 13px;
}
.fancy-checkbox input[type="checkbox"] + span:before {
display: inline-block;
vertical-align: middle;
position: relative;
bottom: 1px;
width: 18px;
height: 18px;
margin-right: 5px;
content: "";
border: 1px solid #ccc;
}
.fancy-checkbox input[type="checkbox"]:checked + span:before {
font-family: FontAwesome;
/* content: '\f00c'; */
font-size: 12px;
color: #99a1a7;
text-align: center;
line-height: 16px;
background: #ededed;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<label class="fancy-checkbox">
<input type="checkbox"><span></span>
</label>
</body>
</html>
input[type="radio"]
{
-webkit-appearance: none;/*让原本的样式不起作用(这是重点)*/
border:1px solid #DADADA;/*分割线*/
height:15px;
width:15px;
outline:none;
vertical-align: middle;
cursor: pointer;
}
input[type="radio"]:checked
{
background:#F34E51 url(../images/input_gou.png) 1px 2px;
background-size: 13px;/*背景大小*/
}
input[type="checkbox"]
{
-webkit-appearance: none;/*让原本的样式不起作用(这是重点)*/
border:1px solid #DADADA;/*分割线*/
height:15px;
width:15px;
outline:none;
vertical-align: middle;
cursor: pointer;
}
input[type="checkbox"]:checked
{
background:#F34E51 url(../images/input_gou.png) 1px 2px;
background-size: 13px;/*背景大小*/
}
3.还有关于select的样式后补