📜  复选框更改背景颜色引导程序 - CSS 代码示例

📅  最后修改于: 2022-03-11 14:47:34.108000             🧑  作者: Mango

代码示例1
/* 
THIS ONE WORKS WITH COPY-PASTE BTW, 
YOU JUST NEED TO ADD class="custom-checkbox" 
to a div containing your checkboxes, like:
*/ .custom-checkbox > [type="checkbox"], .custom-checkbox > label{ margin-bottom:0px !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-checkbox > [type="checkbox"]:not(:checked), .custom-checkbox > [type="checkbox"]:checked { position: absolute; left: -9999px; } .custom-checkbox > [type="checkbox"]:not(:checked) + label, .custom-checkbox > [type="checkbox"]:checked + label { position: relative; padding-left: 22px; cursor: pointer; } .custom-checkbox > [type="checkbox"]:not(:checked) + label:before, .custom-checkbox > [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 50%; margin-top:-9px; width: 17px; height: 17px; border: 1px solid #ddd; background: #ffffff; border-radius: 2px; } .custom-checkbox > [type="checkbox"]:not(:checked) + label:after, .custom-checkbox > [type="checkbox"]:checked + label:after { font: normal normal normal 12px/1 'Glyphicons Halflings'; content: '\e013'; position: absolute; top: 50%; margin-top:-7px; left: 2px; color: #94C947; xtransition: all .2s; } .custom-checkbox > [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .custom-checkbox > [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after, .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after { content: '\2212'; left: 2px; opacity: 1; transform: scale(1); } .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before, .custom-checkbox > [type="checkbox"]:disabled:checked + label:before { box-shadow: none; background-color: #eeeeee; border-color: #eeeeee; cursor: not-allowed; opacity: 1; color: #dadada; } .custom-checkbox > [type="checkbox"]:disabled:checked + label:after { color: #dadada; cursor: not-allowed; } .custom-checkbox > [type="checkbox"]:disabled + label { color: #aaa; cursor: not-allowed; } .custom-checkbox > [type="checkbox"]:checked:focus + label:before, .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before { border: 1px solid #66afe9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } .custom-checkbox > label:hover:before { border: 1px solid #88D2FF !important; } .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before, .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{ border: 1px solid #E4E4E4 !important; }