Checkbox-Zeichen in HTML

technik

Eine Checkbox als Text anzeigen

Wofür braucht man das denn?

Eine Checkbox ist ja eigentlich ein Formular-Element zum Ankreuzen. Aber manchmal soll man es nicht ankreuzen können, sondern es soll einfach nur angezeigt werden, angekreuzt oder nicht angekreuzt.

Browser können unzählige Sonderzeichen anzeigen und manche davon eignen sich auch als Checkbox, angekreuzt und nicht angekreuzt. Aber nicht alle Browser können alle Sonderzeichen anzeigen!

Hier findet ihr eine kleine Auswahl an Checkbox-Sonderzeichen, auch zum Ausprobieren, wie sie im Browser angezeigt werden.
Im Internet findet man viele Beispiele, aber vor allem für "Häkchen", also angekreuzte Checkboxen (s. Links unten).

Unicode-Nr. HTML-Code Zeichen Offizieller Name Beschreibung
U+00058 (88) X, X X LATIN CAPITAL LETTER X Großer Buchstabe X
U+237B (9083) ⍻ ⍻ NOT CHECK MARK Durchgestrichenes Häkchen
U+2573 (9587) ╳ ╳ LIGHT DIAGONAL CROSS Dünnes diagonales Kreuz
U+25A1 (9633) □, □ □ WHITE SQUARE Weißes Quadrat
U+25A2 (9634) ▢ ▢ WHITE SQUARE WITH ROUNDED CORNERS abgerundetes Quadrat
U+25FB (9723) ◻ ◻ WHITE MEDIUM SQUARE mittleres Kästchen
U+2610 (9744) ☐ ☐ BALLOT BOX (1) Kästchen (für Wahl, Stimmzettel)
U+2611 (9745) ☑ ☑ BALLOT BOX WITH CHECK (1) Abgehaktes Kästchen
U+2612 (9746) ☒ ☒ BALLOT BOX WITH X (1) Angekreuztes Kästchen
U+2613 (9747) ☓ ☓ SALTIRE Andreaskreuz
U+26DD (9949) ⛝ ⛝ SQUARED SALTIRE (2) Quadrat-Andreaskreuz
U+26F6 (9974) ⛶ ⛶ SQUARE FOUR CORNERS (2) abgerundete Quadratecken
U+2705 (9989) ✅ ✅ WHITE HEAVY CHECK MARK Weißes fettes Häkchen
U+2713 (10003) ✓, ✓ ✓ CHECK MARK Häkchen
U+2714 (10004) ✔ ✔ HEAVY CHECK MARK Fettes Häkchen
U+2715 (10005) ✕ ✕ MULTIPLICATION X Kreuzchen als Malzeichen für Multiplikation
U+2716 (10006) ✖ ✖ HEAVY MULTIPLICATION X fettes Kreuzchen als Malzeichen
U+2717 (10007) ✗, ✗ ✗ BALLOT X Kreuzchen (wörtl. „Wahlkästchen-X“)
U+2718 (10008) ✘ ✘ HEAVY BALLOT X Fettes Kreuzchen
U+274C (10060) ❌ ❌ CROSS MARK Kreuzzeichen
U+274E (10062) ❎ ❎ NEGATIVE SQUARED CROSS MARK Negatives Kreuzzeichen im Quadrat
U+274F (10063) ❏ ❏ LOWER RIGHT DROP-SHADOWED WHITE SQUARE Weißes Quadrat unten rechts abgetrennt schattiert
U+2A2f (10799) ⨯, ⨯ ⨯ BALLOT X Kreuzchen (wörtl. „Wahlkästchen-X“)
U+1F5F8 (128504) 🗸 🗸 LIGHT CHECK MARK (1,2) Dünnes Häkchen
U+1F5F9 (128505) 🗹 🗹 BALLOT BOX WITH BOLD CHECK (1,2) Fett abgehaktes Kästchen
U+1F7AC (128940) 🞬 🞬 HEAVY SALTIRE (1,2) Fettes Andreaskreuz

Ich habe diese Zeichen alle unter Windows 10 (Microsoft Edge 97.0, Firefox 96.0, Chrome 97.0), Android 10 Samsung Galaxy S9 (Chrome 97.0, Samsung-Internet 16.0) und iOS 14.7 iPhone 7 (Safari 14) ausprobiert und sie sehen dort überall (bis auf wenige Größenunterschiede und Schatten) gleich aus, außer ☐ - ☒ und 🗸 - 🞬 (1) unter Android 10 in beiden Browsern und ⛝, ⛶ und 🗸 - 🞬 (2) unter iOS.

Links

Interessante Seiten zum Thema HTML-Sonderzeichen:

Nächster Beitrag Vorheriger Beitrag