Wie kann man die Größe einer Checkbox durch HTML und CSS einstellen

Ein Kontrollkästchen (Checkbox) wird bei Aktivierung als angekreuztes Quadratfeld angezeigt. Die Kontrollkästchen werden verwendet, um einem Benutzer die Auswahl aus einer Reihe von Optionen zu ermöglichen. Der Unterschied zwischen den Kontrollkästchen und Optionsfeldern (Radiobuttons) besteht darin, dass Optionsfelder alle aktuellen Optionen gleichzeitig auswählt, wenn ein Kontrollkästchen verwendet wird, um eine Option auszuwählen.

In diesem Kapitel erfahren Sie, wie wir die Größe eines Kontrollkästchens ändern können. Hier werden zwei Methoden vorgestellt.

Verwenden Sie die Eigenschaften width und height

Es ist möglich, die Größe der Kontrollkästchen mithilfe von CSS-Eigenschaften width und height einzustellen. Verwenden Sie die Eigenschaft height, um die Höhe des Kontrollkästchens festzulegen, und die Eigenschaft width, um die Breite des Kontrollkästchens festzulegen.

Ihr Code wird so aussehen:

input./*Checkbox-Class-Name*/ {
width : /*bevorzugte Breite*/;
height : /*bevorzugte Höhe*/;
}

Lassen Sie uns nun ein Beispiel sehen, um deutlich zu verstehen, wie man das macht.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input.larger {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Größe eines Kontrollkästchens</h2>
    <p>Standardgröße des Kontrollkästchens:</p>
    <input type="checkbox" name="checkBox1" checked>
    <p>Ein größeres Kontrollkästchen:</p>
    <input type="checkbox" class="larger" name="checkBox2" checked>
  </body>
</html>
Das funktioniert gut in Google Chrome, Microsoft Edge und Internet Explorer. Aber in Mozilla Firefox ist der anklickbare Kontrollkästchenbereich wie definiert, aber es wird ein voreingestelltes Kontrollkästchen angezeigt.

Verwenden Sie die Eigenschaft transform

Ein alternativer Ansatz, der auch für Mozilla Firefox funktioniert, ist die Verwendung der CSS-Eigenschaft transform. Diese Methode funktioniert auch bei Chrom gut.

Die Codesyntax sieht wie folgt aus:

input./*Checkbox-Class-Name*/ {
transform : scale(/*bevorzugte Vergrößerung*/);
}
Es gibt einige Nachteile bei der Verwendung dieser Methode. Um es im Browserfenster zu halten oder zu verhindern, dass es sich mit anderen Elementen überschneidet, muss das Kontrollkästchen genau positioniert sein. Das Kontrollkästchen kann bei größeren Größen in einigen Browsern auch pixelig erscheinen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input.larger { 
      transform: scale(5); 
      margin: 30px;
      } 
    </style>
  </head>
  <body>
    <p>Voreingestellte Kontrollkästchengröße:</p>
    <input type="checkbox" name="checkBox1" checked> 
    <p>Ein größeres Kontrollkästchen:</p>
    <input type="checkbox" class="larger" name="checkBox2" checked> 
  </body>
</html>