radio和checkbox样式的修改

来源：互联网发布：未转变者服务器端口编辑：程序博客网时间：2024/06/05 17:25

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>

3.还有关于select的样式后补

阅读全文

0 0