Kontrollkästchen auf Webseiten - wie können sie vergrößert werden?

Die in den meisten Browsern gerenderten Standard-Kontrollkästchen sind recht klein und werden auch bei Verwendung einer größeren Schrift nicht größer. Was ist die beste, browserunabhängige Möglichkeit, größere Kontrollkästchen anzuzeigen?

Falls dies jemandem helfen kann, finden Sie hier einfaches CSS als Ausgangspunkt. Verwandelt es in ein einfaches, abgerundetes Quadrat, das groß genug für Daumen mit einer umgeschalteten Hintergrundfarbe ist.

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" />

Tatsächlich gibt es eine Möglichkeit, sie größer zu machen, Kontrollkästchen wie alles andere (sogar ein Iframe wie ein Facebook-Button).

Wickeln Sie sie in ein "gezoomtes" Element:

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

Es mag ein bisschen "neu skaliert" aussehen, aber es funktioniert.

Natürlich können Sie diesen div schweben lassen: links und Ihr Etikett daneben legen, schweben: auch links.

Versuchen Sie dieses CSS

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

Ich habe versucht, das paddingund marginund sowie das widthund zu ändern height, und dann festgestellt, dass es funktioniert, wenn Sie nur die Skalierung erhöhen:

input[type=checkbox] {
    transform: scale(1.5);
}

Hier ist ein Trick, der in den neuesten Browsern (IE9 +) als reine CSS-Lösung funktioniert und mit Javascript verbessert werden kann, um IE8 und niedriger zu unterstützen.

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

Gestalten labelSie das Kontrollkästchen so, wie es aussehen soll

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

Für Javascript können Sie der Beschriftung Klassen hinzufügen, um den Status anzuzeigen. Es wäre auch ratsam, die folgende Funktion zu verwenden:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

BEARBEITEN, um #checkboxIDStile zu ändern

Ich schreibe eine Phonegap-App und Kontrollkästchen variieren in Größe, Aussehen usw. Also habe ich mein eigenes einfaches Kontrollkästchen erstellt:

Zuerst der HTML-Code:

<span role="checkbox"/>

Dann das 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);
}

Um den Kontrollkästchenstatus umzuschalten, habe ich JQuery verwendet:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

Aber es kann leicht ohne es gemacht werden ...

Hoffe es kann helfen!

Nur reines modernes 2020 CSS Entscheidung , ohne verschwommene Skalierung oder unhandliche Transformation. Und mit Zecke! =)

Funktioniert gut in Firefox- und Chromium-basierten Browsern.

Sie können Ihre Kontrollkästchen also rein ADAPTIV regeln , indem Sie einfach die übergeordneten Blöcke festlegen , font-heightund sie werden mit dem Text größer !

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>