Czy istnieje agnostyczny sposób przeglądania w przeglądarce, aby zwiększyć rozmiar pola wyboru bez zmiany znaczników HTML?

Question

Czy istnieje agnostyczny sposób przeglądania przeglądarki w celu zwiększenia rozmiaru <input type="checkbox"> bez zmiany znaczników HTML?

Próbowałem zmienić wysokość i szerokość w CSS, ale problem polega na tym, że w Firefoksie pole wyboru jest pikselowane. W Operze zwiększa się tylko rozmiar logiki wejściowej, a nie wizualny.

Czy powinienem użyć pseudo selektorów <label> and :before, aby wyglądał ładnie i szeroko, jakie są alternatywne rozwiązania?

Próba uniknięcia JavaScriptu, jeśli to możliwe.

Answer 1

Masz rację, zakładając, że obsługa wielu przeglądarek jest niespójna. Jeśli chcesz kuloodpornej personalizacji, zechcesz napisać własne rozwiązanie.

Osobiście przyjrzałbym się rozwiązaniom stosowanym przez główne struktury css, takie jak Bootstrap i Foundation.

Od jednego z linków:

label input[type="checkbox"]{ display: none; } 
 

 
label input[type="checkbox"]:checked + .cr > .cr-icon{ 
 
    transform: scale(1) rotateZ(0deg); 
 
    opacity: 1; 
 
} 
 

 
label input[type="checkbox"] + .cr > .cr-icon{ 
 
    transform: scale(3) rotateZ(-20deg); 
 
    opacity: 0; 
 
    transition: all .3s ease-in; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label> 
 
    <input type="checkbox" value="" checked=""> 
 
    <span class="cr"><i class="cr-icon fa fa-check"></i></span> 
 
    Click Me 
 
</label>

label input[type="checkbox"]{ display: none; } 
 

 
label input[type="checkbox"]:checked + .cr > .cr-icon{ 
 
    transform: scale(1) rotateZ(0deg); 
 
    opacity: 1; 
 
} 
 

 
label input[type="checkbox"] + .cr > .cr-icon{ 
 
    transform: scale(3) rotateZ(-20deg); 
 
    opacity: 0; 
 
    transition: all .3s ease-in; 
 
} 
 

 
.cr-icon { 
 
    display: inline-block; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
.cr-icon:before { 
 
    content: "\2713"; 
 
}

<label> 
 
    <input type="checkbox" value="" checked=""> 
 
    <span class="cr"><i class="cr-icon"></i></span> 
 
    Click Me 
 
</label>

Answer 2

Oto leanest rozwiązanie mogę myśleć: używać label obok checkbox, i stylu label za pomocą ac haracter umieszczony w pseudoelementie ::before.

input[type="checkbox"]{ display: none; } 
 
input[type="checkbox"]+label::before 
 
{ 
 
    content: '☑ '; 
 
    font-size: 1.5em; 
 
} 
 
input[type="checkbox"]:checked+label::before 
 
{ 
 
    content: '☐ '; 
 
}

<input id="cb" type="checkbox"/> 
 
<label for="cb">Click Me</label>

Można zmienić rozmiar pola, dostosowując rozmiar czcionki, a nawet zmienić cały styl wyboru przy użyciu niestandardowej czcionki.

AKTUALIZACJA: Jeśli chcesz dostosować wygląd pudełka, unikając używania niestandardowej czcionki, możesz chcieć grać na tapetach SVG. Oto brzydki przykład, ale masz pomysł (również zachęcamy do korzystania obramowanie na zewnątrz wyboru lub włączenia go do formatu SVG):

input[type="checkbox"]{ display: none; } 
 
input[type="checkbox"]+label::before 
 
{ 
 
    content: '☐'; 
 
    font-size: 1.5em; 
 

 
} 
 
input[type="checkbox"]:checked+label::before 
 
{ 
 
    background: url('https://upload.wikimedia.org/wikipedia/commons/8/8b/Checkbox.svg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<input id="cb" type="checkbox"/> 
 
<label for="cb">Click Me</label>

Answer 3

Do tego można Za pomocą przełącznika pseudo

HTML

<input type="checkbox" id="test1" /> 
<label for="test1">Checkbox</label> 

C SS

/* Base for label styling */ 
[type="checkbox"]:not(:checked), 
[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
} 
[type="checkbox"]:not(:checked) + label, 
[type="checkbox"]:checked + label { 
    position: relative; 
    padding-left: 25px; 
    cursor: pointer; 
} 

/* checkbox aspect */ 
[type="checkbox"]:not(:checked) + label:before, 
[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: -1px; 
    width: 17px; height: 17px; 
    border: 1px solid #bbb; 
    background: #fff; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1); 
} 
/* checked mark aspect */ 
[type="checkbox"]:not(:checked) + label:after, 
[type="checkbox"]:checked + label:after { 
    content: '✔'; 
    position: absolute; 
    top: 1px; left: 4px; 
    font-size: 19px; 
    line-height: 0.8; 
    color: #09ad7e; 
    transition: all .2s; 
} 
/* checked mark aspect changes */ 
[type="checkbox"]:not(:checked) + label:after { 
    opacity: 0; 
    transform: scale(0); 
} 
[type="checkbox"]:checked + label:after { 
    opacity: 1; 
    transform: scale(1); 
} 
/* disabled checkbox */ 
[type="checkbox"]:disabled:not(:checked) + label:before, 
[type="checkbox"]:disabled:checked + label:before { 
    box-shadow: none; 
    border-color: #bbb; 
    background-color: #ddd; 
} 
[type="checkbox"]:disabled:checked + label:after { 
    color: #999; 
} 
[type="checkbox"]:disabled + label { 
    color: #aaa; 
} 
/* accessibility */ 
[type="checkbox"]:checked:focus + label:before, 
[type="checkbox"]:not(:checked):focus + label:before { 
    border: 1px dotted blue; 
} 

/* hover style just for information */ 
label:hover:before { 
    border: 1px solid #4778d9!important; 
} 

dla zaktualizowanymi skrzypce click here