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

Standardowe pola wyboru renderowane w większości przeglądarek są dość małe i nie powiększają się, nawet jeśli używana jest większa czcionka. Jaki jest najlepszy, niezależny od przeglądarki sposób wyświetlania większych pól wyboru?

Jeśli to może pomóc każdemu, tutaj jest prosty CSS jako punkt wyjścia. Zmienia go w podstawowy zaokrąglony kwadrat, wystarczająco duży, aby pomieścić kciuki z przełączanym kolorem tła.

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;
}

<input type="checkbox" />

Właściwie jest sposób, aby je powiększyć, pola wyboru, jak wszystko inne (nawet ramka iframe, taka jak przycisk na Facebooku).

Umieść je w „powiększonym” elemencie:

.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;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

Może wyglądać na nieco „przeskalowaną”, ale działa.

Oczywiście możesz sprawić, że div float: left i umieścić obok siebie etykietę, float: left.

Wypróbuj ten CSS

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

Próbowałem zmienić paddingi margini dobrze jak widthi height, a potem w końcu stwierdziłem, że jeśli po prostu zwiększysz skalę, to zadział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>
</div>

Stylizuj labeltak, jak chcesz, aby wyglądało pole wyboru

#checkboxID
{
  position: absolute 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;
});

EDYCJA, aby zmodyfikować #checkboxIDstyle

Piszę aplikację phonegap, a pola wyboru różnią się rozmiarem, wyglądem itp. Dlatego stworzyłem 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!

Tylko nowoczesna decyzja CSS 2020 , bez rozmytego skalowania lub nieporęcznej transformacji. I z kleszczem! =)

Działa dobrze w przeglądarkach opartych na Firefox i Chromium.

Możesz więc rządzić swoimi polami wyboru wyłącznie ADAPTACYJNIE , po prostu ustawiając bloki nadrzędne, font-heighta będzie rosnąć wraz z tekstem!

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;
}

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