radio和checkbox樣式的修改
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的樣式後補