第一步:自定义单选框、复选框的层叠样式表,并将其映入
build.css:
.checkBox { padding-left: 20px; } .checkBox label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } .checkBox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; 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: -20px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .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; } .checkBox input[type="checkBox"]:checked + label::after, .checkBox input[type="radio"]:checked + label::after { font-family: "FontAwesome"; content: "\f00c";} .checkBox input[type="checkBox"]:indeterminate + label::after, .checkBox input[type="radio"]:indeterminate + label::after { display: block; content: ""; width: 10px; height: 3px; background-color: #555555; border-radius: 2px; margin-left: -16.5px; margin-top: 7px; } .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%; } .checkBox.checkBox-inline { margin-top: 0; } .checkBox-primary input[type="checkBox"]:checked + label::before, .checkBox-primary input[type="radio"]:checked + label::before { background-color: #337ab7; border-color: #337ab7; } .checkBox-primary input[type="checkBox"]:checked + label::after, .checkBox-primary input[type="radio"]:checked + label::after { color: #fff; } .checkBox-danger input[type="checkBox"]:checked + label::before, .checkBox-danger input[type="radio"]:checked + label::before { background-color: #d9534f; border-color: #d9534f; } .checkBox-danger input[type="checkBox"]:checked + label::after, .checkBox-danger input[type="radio"]:checked + label::after { color: #fff; } .checkBox-info input[type="checkBox"]:checked + label::before, .checkBox-info input[type="radio"]:checked + label::before { background-color: #5bc0de; border-color: #5bc0de; } .checkBox-info input[type="checkBox"]:checked + label::after, .checkBox-info input[type="radio"]:checked + label::after { color: #fff; } .checkBox-warning input[type="checkBox"]:checked + label::before, .checkBox-warning input[type="radio"]:checked + label::before { background-color: #f0ad4e; border-color: #f0ad4e; } .checkBox-warning input[type="checkBox"]:checked + label::after, .checkBox-warning input[type="radio"]:checked + label::after { color: #fff; } .checkBox-success input[type="checkBox"]:checked + label::before, .checkBox-success input[type="radio"]:checked + label::before { background-color: #5cb85c; border-color: #5cb85c; } .checkBox-success input[type="checkBox"]:checked + label::after, .checkBox-success input[type="radio"]:checked + label::after { color: #fff;} .checkBox-primary input[type="checkBox"]:indeterminate + label::before, .checkBox-primary input[type="radio"]:indeterminate + label::before { background-color: #337ab7; border-color: #337ab7; } .checkBox-primary input[type="checkBox"]:indeterminate + label::after, .checkBox-primary input[type="radio"]:indeterminate + label::after { background-color: #fff; } .checkBox-danger input[type="checkBox"]:indeterminate + label::before, .checkBox-danger input[type="radio"]:indeterminate + label::before { background-color: #d9534f; border-color: #d9534f; } .checkBox-danger input[type="checkBox"]:indeterminate + label::after, .checkBox-danger input[type="radio"]:indeterminate + label::after { background-color: #fff; } .checkBox-info input[type="checkBox"]:indeterminate + label::before, .checkBox-info input[type="radio"]:indeterminate + label::before { background-color: #5bc0de; border-color: #5bc0de; } .checkBox-info input[type="checkBox"]:indeterminate + label::after, .checkBox-info input[type="radio"]:indeterminate + label::after { background-color: #fff; } .checkBox-warning input[type="checkBox"]:indeterminate + label::before, .checkBox-warning input[type="radio"]:indeterminate + label::before { background-color: #f0ad4e; border-color: #f0ad4e; } .checkBox-warning input[type="checkBox"]:indeterminate + label::after, .checkBox-warning input[type="radio"]:indeterminate + label::after { background-color: #fff; } .checkBox-success input[type="checkBox"]:indeterminate + label::before, .checkBox-success input[type="radio"]:indeterminate + label::before { background-color: #5cb85c; border-color: #5cb85c; } .checkBox-success input[type="checkBox"]:indeterminate + label::after, .checkBox-success input[type="radio"]:indeterminate + label::after { background-color: #fff; } .radio { padding-left: 20px; } .radio label { display: inline-block; vertical-align: middle; position: relative; padding-left: 5px; } .radio label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: -20px; border: 1px solid #cccccc; border-radius: 50%; background-color: #fff; -webkit-transition: border 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out; transition: border 0.15s ease-in-out; } .radio label::after { display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #555555; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label { opacity: 0.65; } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio-primary input[type="radio"] + label::after { background-color: #337ab7; } .radio-primary input[type="radio"]:checked + label::before { border-color: #337ab7; } .radio-primary input[type="radio"]:checked + label::after { background-color: #337ab7; } .radio-danger input[type="radio"] + label::after { background-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::before { border-color: #d9534f; } .radio-danger input[type="radio"]:checked + label::after { background-color: #d9534f; } .radio-info input[type="radio"] + label::after { background-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::before { border-color: #5bc0de; } .radio-info input[type="radio"]:checked + label::after { background-color: #5bc0de; } .radio-warning input[type="radio"] + label::after { background-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::before { border-color: #f0ad4e; } .radio-warning input[type="radio"]:checked + label::after { background-color: #f0ad4e; } .radio-success input[type="radio"] + label::after { background-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::before { border-color: #5cb85c; } .radio-success input[type="radio"]:checked + label::after { background-color: #5cb85c; } input[type="checkBox"].styled:checked + label:after, input[type="radio"].styled:checked + label:after { font-family: 'FontAwesome'; content: "\f00c"; } input[type="checkBox"] .styled:checked + label::before, input[type="radio"] .styled:checked + label::before { color: #fff; } input[type="checkBox"] .styled:checked + label::after, input[type="radio"] .styled:checked + label::after { color: #fff; }
第二步:引入相关头文件
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
第三步:使用案例:
<!-- checkBox --> <div class="checkBox"> <input type="checkBox" name="item[1]" id="item1" value=""/> <label for="item1">选项一</label> </div> <div class="checkBox checkBox-success"> <input type="checkBox" name="item[2]" id="item2" value="" checked="checked" /> <label for="item2">选项二</label> </div> <div class="checkBox checkBox-info"> <input type="checkBox" name="item[3]" id="item3" value="" checked="checked"/> <label for="item3">选项三</label> </div> <!-- radio --> <div class="radio"> <input type="radio" name="radio" id="radio1" value="" /> <label for="radio1">ITEM 1</label> </div> <div class="radio radio-success"> <input type="radio" name="radio" id="radio2" value="" checked="checked" /> <label for="radio2">ITEM 2</label> </div>
第四步:代码整合,(注:build.css与该HTML在同一目录下)
<!DOCTYPE html> <html> <head> <Meta charset="utf-8" /> <Meta name="viewport" content="width=device-width, initial-scale=1"> <title>创建一个好看的 CheckBox</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="build.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"/> </head> <body> <!-- checkBox --> <div class="checkBox"> <input type="checkBox" name="item[1]" id="item1" value=""/> <label for="item1">选项一</label> </div> <div class="checkBox checkBox-success"> <input type="checkBox" name="item[1]" id="item2" value="" checked="checked" /> <label for="item2">选项二</label> </div> <div class="checkBox checkBox-info"> <input type="checkBox" name="item[1]" id="item3" value="" checked="checked"/> <label for="item3">选项三</label> </div> <!-- radio --> <div class="radio"> <input type="radio" name="radio" id="radio1" value="" /> <label for="radio1">ITEM 1</label> </div> <div class="radio radio-success"> <input type="radio" name="radio" id="radio2" value="" checked="checked" /> <label for="radio2">ITEM 2</label> </div> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。