使用 css 設定 input 的 chexkbox 的樣式
阿新 • • 發佈:2018-12-12
/* html */ <div id="check_css3"> <span><input type="checkbox" class="input_check"/><label></label></span> </div> /* css checkbox 對勾框 可以多選*/ #check_css3 { display: flex; } #check_css3 span:first-child {position: relative;margin-top:10px;} #check_css3 .input_check {position: absolute;width: 30px; height: 30px; opacity: 0; top: 10px; left:3px; z-index: 10; cursor: pointer; } #check_css3 .input_check + label { display: inline-block; margin-top:5px; width: 30px; height: 30px; border: 1px solid red; border-radius:50%; } #check_css3 .input_check:checked + label::after { position: absolute; left: 0px; top:4px; width: 30px; height: 30px; /* border: 1px solid #ccc;*/ border-radius:50%; content: "\2714"; text-align:center; line-height: 30px; color: #39e60e; display: inline-block; -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); }