設置沒有標簽標記的復選框的樣式

Question

我做了一個復選框樣式，它使用了標簽標記。 見下文

是否仍可以使整個復選框的CSS沒有標簽標記？ 所以我只是有Input標簽，但還有CSS。 這是復選框的CSS。

 .control { font-size: 18px; position: relative; display: block; margin-bottom: 15px; padding-left: 30px; cursor: pointer; } .control input { position: absolute; z-index: -1; opacity: 0; } .control__indicator { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: #e6e6e6; } .control--radio .control__indicator { border-radius: 50%; } .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator { background: #ccc; } .control input:checked ~ .control__indicator { background: orange; } .control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator { background: #ecb53a; } .control input:disabled ~ .control__indicator { pointer-events: none; opacity: .6; background: #e6e6e6; } .control__indicator:after { position: absolute; display: none; content: ''; } .control input:checked ~ .control__indicator:after { display: block; } .control--checkbox .control__indicator:after { top: 4px; left: 8px; width: 3px; height: 8px; transform: rotate(45deg); border: solid black; border-width: 0 2px 2px 0; } 

 <label class="control control--checkbox"> <input type="checkbox"/> <div class="control__indicator"></div> </label> 

我希望你們能幫助我。

Answer 1

================================================== =================

CSS解決方案（僅適用於Chrome，不適用於FF，IE）

您可以使用css :after ， :checked將自定義樣式應用於復選框。

請參見下面的代碼或jsfiddle

的HTML

<input type="checkbox"/>

的CSS

    input[type='checkbox']:after{
    line-height: 1.5em;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -4px;
    margin-left: -4px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: rgb(224,224,224);
}

input[type='checkbox']:checked:after {
width: 15px;
    height: 15px;
    border: 3px solid #00ff00;
}

FIDDLE https://jsfiddle.net/guruling/evfr3kk3/

希望這將幫助您應用復選框自定義樣式。

================================================== =================

新更新::使用jQuery的跨瀏覽器解決方案

的HTML

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>

的CSS

.custom-checkbox{
  line-height: 1.5em;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top:0px;
    margin-right: -18px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: rgb(224,224,224);
    box-sizing:border-box;
}

.custom-checkbox.checked{
    width: 18px;
    height: 18px;
    border: 3px solid #00ff00;
    box-sizing:border-box;
}

input[type="checkbox"]{
  margin: 0px;
  height: 16px;
  width: 19px;
  opacity:0;
}

JS

function setCheckbox(elem){
        if($(elem).is(':checked')){
         $(elem).prev('.custom-checkbox').addClass('checked');
    }else{
       $(elem).prev('.custom-checkbox').removeClass('checked');
    }
}

$(document).ready(function(){
        // apply custom checkbox on page ready
        $('input[type="checkbox"]').before('<span class="custom-checkbox">');
    $('input[type="checkbox"]').each(function(){
          setCheckbox($(this));
        });
});

// on input change, change custom checkbox 
$('body').on('change', 'input[type="checkbox"]', function(){
          setCheckbox($(this));
    });

FIDDLE https://jsfiddle.net/guruling/2rsa7ghn/48/

Answer 2

 input[type=checkbox]:checked:before { top: 2px; left: 1px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #35ac19; border-bottom: 2px solid #35ac19; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } input[type=checkbox]:before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; z-index: 0; border: 2px solid #A9ABAE; border-radius: 1px; margin-top: 2px; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; background:#fff; } 

 <input type="checkbox" > 

jsFiddle： https ://jsfiddle.net/chandan20j/myr2fe13/3/

Answer 3

您可以將其用於某些瀏覽器！

的CSS

input[type='checkbox']:after {
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
background: rgb(224,224,224);
}
input[type='checkbox']:checked:after {
content: '✔';
text-align: center;
}

的HTML

<input type="checkbox"/>

看起來不錯，您可以自定義它！