Native Check- und Radioboxen werden in jedem Browser anders dargestellt. Für ein einheitliches Design muss man also selbst Hand anlegen. In diesem Beispiel werden die Check-Haken und Radio-Punkte mittels einer SVG-Grafik eingebunden. Der Rest ist per CSS einfach darstellbar.
Der HTML-Code für das SVG-Icon und eine Checkbox mit Bezeichnung ist trivial.
<label class="check">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M31.385 3.301c-0.25-0.25-0.655-0.25-0.905 0l-21.787 21.787c-0.25 0.25-0.655 0.25-0.905 0l-6.204-6.204c-0.25-0.25-0.655-0.25-0.905 0l-0.226 0.226c-0.25 0.25-0.25 0.655 0 0.905l7.004 7.004c0 0 0.001 0 0.001 0v0c0-0 0.001-0 0.001 0l0.33 0.33c0.25 0.25 0.655 0.25 0.905 0l22.917-22.917c0.25-0.25 0.25-0.655 0-0.905l-0.226-0.226z"></path>
</svg>
<input type="checkbox" name="check">
<span>Bezeichnung</span>
</label>
Per CSS wird die native Checkbox angepasst und bei "checked" ein SVG-Icon eingeblendet. Die Farbvariablen werden hier aus :root geerbt.
.check {
margin: 1.6rem;
display: flex;
align-items: center;
/* check icon */
svg {
opacity: 0;
height: 2.4rem;
width: 2.4rem;
padding: 0.3rem;
margin-right: -2.4rem;
pointer-events: none;
path {
fill: var(--default-color);
}
}
&:has(:checked) svg {
opacity: 1;
}
/* checkbox */
input[type="checkbox"] {
appearance: none;
height: 2.4rem;
width: 2.4rem;
margin: 0;
border: 0.1rem solid var(--text-color);
border-radius: 0.2rem;
cursor: pointer;
&:focus {
outline: 0.4rem solid var(--default2-color);
}
}
/* caption */
span {
margin-left: 0.8rem;
}
}
Und so sieht das Ergebnis aus:
Der HTML-Code für das SVG-Icon und eine Radiobox mit Bezeichnung ist ebenfalls trivial.
<label class="radio">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M25.6 16c0 5.302-4.298 9.6-9.6 9.6s-9.6-4.298-9.6-9.6c0-5.302 4.298-9.6 9.6-9.6s9.6 4.298 9.6 9.6z"></path>
</svg>
<input type="radio" name="radio">
<span>Bezeichnung</span>
</label>
Per CSS wird die native Radiobox angepasst und bei "checked" ein SVG-Icon eingeblendet. Die Farbvariablen werden hier aus :root geerbt.
.radio {
margin: 1.6rem;
display: flex;
align-items: center;
/* check icon */
svg {
opacity: 0;
height: 2.4rem;
width: 2.4rem;
padding: 0.3rem;
margin-right: -2.4rem;
pointer-events: none;
path {
fill: var(--default-color);
}
}
&:has(:checked) svg {
opacity: 1;
}
/* radiobox */
input[type="radio"] {
appearance: none;
height: 2.4rem;
width: 2.4rem;
margin: 0;
border: 0.1rem solid var(--text-color);
border-radius: 50%;
cursor: pointer;
&:focus {
outline: 0.4rem solid var(--default2-color);
}
}
/* caption */
span {
margin-left: 0.8rem;
}
}
Und so sieht das Ergebnis aus:
Damit ist alles getan. Man bedenke aber, dass bei einer langen Liste von Checkboxen der SVG-Code zigmal eingebunden werden muss. Das bläht den zu ladenen HTML-Code unnötig auf. Daher ist es besser, die Icons beim ersten Laden im Session Storage abzulegen und ab dem zweiten Bedarf von dort zu holen.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.