input--checkbox樣式
阿新 • • 發佈:2018-11-26
<label class="my-checklist-label">
<input type="checkbox" class="my-checkbox-input" value="選項B">
<span class="my-checkbox-core"></span>
<span class="my-checkbox-label">選項B</span>
</label>
.my-checkbox-input{ display: none; } .my-checkbox-input:checked+.my-checkbox-core { background-color: #26a2ff; border-color: #26a2ff; } .my-checkbox-core { display: inline-block; background-color: #fff; border-radius: 100%; border: 1px solid #ccc; position: relative; width: 16px; height: 16px; vertical-align: middle; } .my-checkbox-input:checked+.my-checkbox-core:after { border-color: #fff; -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } .my-checkbox-core:after { border: 2px solid transparent; border-left: 0; border-top: 0; content: " "; top: 2px; left: 5px; position: absolute; width: 4px; height: 7px; -webkit-transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s,-webkit-transform .2s; }