Html5的一些组件自定义问题
1、自定义单选按钮 复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择框样式</title> <style> label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;} input[type="checkbox"],input[type="radio"] {display:none;} input[type="radio"] + i {border-radius:7px;} input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;} input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;} input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;} </style> </head> <body> <label><input type="checkbox"><i>√</i>复选框</label><br> <label><input type="checkbox" checked><i>√</i>复选框</label><br> <label><input type="checkbox" disabled><i>√</i>复选框禁用</label><br> <label><input type="checkbox" disabled checked><i>√</i>复选框禁用已选</label><br> <label><input type="radio" name="abc"><i>√</i>单选框</label><br> <label><input type="radio" name="abc" checked><i>√</i>单选框</label><br> <label><input type="radio" name="abc" disabled><i>√</i>单选框禁用</label><br> <label><input type="radio" name="def" disabled checked><i>√</i>单选框禁用已选</label><br> </body> </html>
2、label标签文字两端对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>JS Bin</title> <style id="jsbin-css"> label{ display: block; margin: 20px; } label > span{ position: relative; width: 96px; text-align: justify; float: left; margin-top: 1em; height: 1em; } label > span::after{ content: ''; display: inline-block; width: 100%; } label > input{ width: 210px; padding: 10px 20px; margin-left: 20px; font-size: 1em; } </style> </head> <body> <label for="contact"> <span>联系人的</span> <input type="text" id="contact"> </label> <label for="phoneNumber"> <span>手机号码大风</span> <input type="phoneNumber"> </label> <label for="verifyCode"> <span>验证码</span> <input type="text" id="verfiyCode"> </label> </body> </html>
3、狐火和google内核浏览器margin的兼容问题
.xlbd-left ul li,.xlbd-right ul li{
margin-top: 0px;
}
/*只针对ff的hack写法*/
@-moz-document url-prefix(){
.xlbd-left ul li,.xlbd-right ul li{
margin-top: 20px;
}
}
