最新资讯当前位置:风暴娱乐 > 最新资讯 > >

Bootstrap复选框和单选按钮美化插件(推荐)

  

[单选按钮和复选框,bootstrap,单选框美化]Bootstrap复选框和单选按钮美化插件(推荐)

  

官网地址  

  

需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。

  

  

checkboxs的样式  

  

checkboxs样式  

  

radio的样式  

  

radio样式  

  

radio样式  

  

只要引入上面所说的文件之后,也可以自己定制样式,代码如下:  

  
  
  .checkbox label::before {  content: "";  display: inline-block;  position: absolute;  width: 20px;  height: 20px;  left: 0;  margin-left: -20px;  border: 1px solid #cccccc;  border-radius: 3px;  background-color: #fff;  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;  }  .checkbox label::after {  display: inline-block;  position: absolute;  width: 16px;  height: 16px;  left: 0;  top: 0;  margin-left: -19px;  padding-left: 3px;  padding-top: 1px;  font-size: 13px;  color: #FAD500;  }  .checkbox input[type="checkbox"],  .checkbox input[type="radio"] {  opacity: 0;  z-index: 1;  }  .checkbox input[type="checkbox"]:focus + label::before,  .checkbox input[type="radio"]:focus + label::before {  outline: thin dotted;  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;  background-color: black;  border-color: black;  }  .checkbox input[type="checkbox"]:checked + label::before,  .checkbox input[type="radio"]:checked + label::before {  background-color: black;  border-color: black;  }  .checkbox input[type="checkbox"]:checked + label::after,  .checkbox input[type="radio"]:checked + label::after {  font-family: "FontAwesome";  content: "\f00c";  }  .checkbox input[type="checkbox"]:disabled + label,  .checkbox input[type="radio"]:disabled + label {  opacity: 0.65;  }  .checkbox input[type="checkbox"]:disabled + label::before,  .checkbox input[type="radio"]:disabled + label::before {  background-color: #eeeeee;  cursor: not-allowed;  }  .checkbox.checkbox-circle label::before {  border-radius: 50%;  
  
      
  
      
  
  
  

上面代码执行的效果  
  

  

上面代码执行的效果  

  

  

(责任编辑:admin)

上一篇:风暴娱乐网站今天上线运行了

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服