Pola wyboru na stronach internetowych - jak je powiększyć?

Na wypadek, gdyby to komuś pomogło, na początek posłużę się prostym kodem CSS. Zmienia go w podstawowy zaokrąglony kwadrat, wystarczająco duży na kciuki, z przełączalnym kolorem tła.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

input[type='checkbox'] {

 -webkit-appearance:none;

 width:30px;

 height:30px;

 background:white;

 border-radius:5px;

 border:2px solid #555;

}

input[type='checkbox']:checked {

 background: #abd;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<input type="checkbox"/>

W rzeczywistości istnieje sposób, aby je powiększyć, pola wyboru, jak wszystko inne (nawet iframe, takie jak przycisk na Facebooku).
Umieść je w „powiększonym” elemencie:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

.double {

 zoom: 2;

 transform: scale(2);

 -ms-transform: scale(2);

 -webkit-transform: scale(2);

 -o-transform: scale(2);

 -moz-transform: scale(2);

 transform-origin: 0 0;

 -ms-transform-origin: 0 0;

 -webkit-transform-origin: 0 0;

 -o-transform-origin: 0 0;

 -moz-transform-origin: 0 0;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<div class="double">

 <input type="checkbox" name="hello" value="1">

Może wyglądać na „przeskalowaną”, ale działa.
Możesz oczywiście sprawić, by ten div był zmienny: left i umieścić obok niego etykietę, float: left też.

Wypróbuj ten CSS

input[type=checkbox] {width:100px; height:100px;}

Próbowałem zmienić

dopełnienie

i

margines

, a także

szerokość

i

wysokość

, a potem w końcu stwierdziłem, że wystarczy powiększyć , to będzie działać:

input[type=checkbox] {

 transform: scale(1.5);

}

Oto sztuczka, która działa w najnowszych przeglądarkach (IE9 +) jako jedyne rozwiązanie CSS, które można ulepszyć za pomocą javascript do obsługi IE8 i starszych.

<div>

 <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever"/>

 <label for="checkboxID"> </label>

Dodaj styl

etykieta

tak, aby wyglądało pole wyboru

#checkboxID

{

 position: <del>absolute</del> fixed;

 margin-right: 2000px;

 right: 100%;

}

#checkboxID + label

{

/* unchecked state */

}

#checkboxID:checked + label

{

/* checked state */

}

W przypadku javascript będziesz mógł dodać klasy do etykiety, aby pokazać stan. Warto też skorzystać z następującej funkcji:

$('label[for]').live('click', function(e){

 $('#' + $(this).attr('for') ).click();

 return false;

});

EDYTUJ, aby zmienić style dla

#checkboxID

Piszę aplikację phonegap i pola wyboru różnią się rozmiarem, wyglądem itp.
Zrobiłem więc własne proste pole wyboru:
Najpierw kod HTML:

<span role="checkbox"/>

Następnie CSS:

[role=checkbox]{

 background-image: url(../img/checkbox_nc.png);

 height: 15px;

 width: 15px;

 display: inline-block;

 margin: 0 5px 0 5px;

 cursor: pointer;

}.checked[role=checkbox]{

 background-image: url(../img/checkbox_c.png);

}

Aby przełączyć stan pola wyboru, użyłem JQuery:

CLICKEVENT='touchend';

function createCheckboxes()

{

 $('[role=checkbox]').bind(CLICKEVENT,function()

 {

 $(this).toggleClass('checked');

 });

}

Ale można to łatwo zrobić bez tego ...
Mam nadzieję, że to pomoże!

Pure modern 2020

Tylko CSS

rozwiązanie bez rozmytego skalowania lub niewygodnej konwersji. I z teakiem! =)
Działa dobrze w przeglądarkach opartych na Firefox i Chromium.
W ten sposób możesz czysto zarządzać swoimi polami wyboru

ADAPTIVE

po prostu ustawiając nadrzędny blok

font-height

, a będzie on rósł wraz z tekstem!
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">

input[type='checkbox'] {

 -moz-appearance: none;

 -webkit-appearance: none;

 appearance: none;

 vertical-align: middle;

 outline: none;

 font-size: inherit;

 cursor: pointer;

 width: 1.0em;

 height: 1.0em;

 background: white;

 border-radius: 0.25em;

 border: 0.125em solid #555;

 position: relative;

}input[type='checkbox']:checked {

 background: #adf;

}input[type='checkbox']:checked:after {

 content: "✔";

 position: absolute;

 font-size: 90%;

 left: 0.0625em;

 top: -0.25em;

}

<pre class="snippet-code-html lang-html prettyprint-override">

<label for="check1"><input type="checkbox" id="check1" checked="checked"/> checkbox one</label>

<label for="check2"><input type="checkbox" id="check2"/> another checkbox</label>