input 复选框单选框样式美化

发布时间：2024-12-11 05:39

刺绣框的选择与搭配：木质框能提升复古风格，金属框则更现代。 #生活技巧# #手工DIY技巧# #刺绣技巧教学#

html 代码

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .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; } </style> </head> <body> <div class="checkbox"> <input id="checkbox1" class="styled" type="checkbox"> <label for="checkbox1"> Default </label> </div> <div class="checkbox checkbox-primary"> <input id="checkbox2" class="styled" type="checkbox" checked> <label for="checkbox2"> Primary </label> </div> <div class="checkbox checkbox-success"> <input id="checkbox3" class="styled" type="checkbox"> <label for="checkbox3"> Success </label> </div> <div class="checkbox checkbox-info"> <input id="checkbox4" class="styled" type="checkbox"> <label for="checkbox4"> Info </label> </div> <div class="checkbox checkbox-warning"> <input id="checkbox5" type="checkbox" class="styled" checked> <label for="checkbox5"> Warning </label> </div> <div class="radio"> <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One"> <label></label> </div> <div class="radio radio-success"> <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two"> <label></label> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409

网址：input 复选框单选框样式美化 https://www.yuejiaxmz.com/news/view/440972

上一篇：matlab 前向神经网络

下一篇：51单片机之定时器控制流水灯实验

input 复选框单选框样式美化

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享