Wie kann ich Radio-Buttons im Browser größer darstellen?
Schauen wir uns zuerst die Standarddarstellung an:
Die Radio-Buttons werden vom Browser in der normalen Größe angezeigt. Um die Größe zu ändern, kann man nicht einfach die “width” oder “height” setzen. Dies vergrößert nur die Abstände, ändert aber (je nach Browser) nicht die Darstellung.
Der Schlüssel liegt in der “transform”-Funktion:
input[type='radio']
{
transform: scale(2);
}
Dies vergrößert uns den Radio-Button auf die doppelte Größe:
Der RadioButton ist damit schonmal deutlich größer, aber die Abstände sind nicht besonders schön. Hier hilft das Setzen eines Abstands:
input[type='radio']
{
transform: scale(2);
margin: 10px;
}
Das rückt die Sache gerade:
Was auffällt ist, dass der Button durch die Vergrößerung pixeliger wird. Das ist unschön und hängt vom Browser ab. In den Screenshots habe ich Mozilla Firefox verwendet. Google Chrome handhabt die Sache deutlich besser:
Mit Checkboxen funktioniert dies natürlich auch:
input[type='checkbox']
{
transform: scale(2);
margin: 10px;
}
