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;
    }
}

 

posted @ 2017-08-15 10:59  rommel0618  阅读(303)  评论(0)  编辑  收藏  举报