|
||||
Formular-Element "Checkbox": Responsiv mit hängendem Einzug?
Moin.
Mir ist es noch nicht gelungen bei dem Formular-Element "Checkbox" einen hängenden Einzug zu realisieren. Wie in einer normalen Liste, sollen die linken Kanten des Textes in allen Zeilen fluchten. Zum Testen: https://codepen.io/fermion/pen/PxBLdr Was übersehe ich? Danke. Wo wir dabei sind: Gibt es für den Titel eines Formulars ein passendes HTML5-Element? In der Spezifikation fand ich nichts. Die Hintergrundfarbe der Checkbox lässt sich nicht einfach durch ein Setzen von "background-color" ändern. Vermutlich werden da vom Browser Unicodezeichen für eine gesetzte Checkbox eingefügt, oder? Wißt ihr, wie man die Farbe ändern kann? Aufwändige Lösungen wie ein Ausblenden der originalen Checkbox und ein Erzeugen einer Fake-Checkbox über erzeugten Inhalt möchte ich nicht einsetzen, dann würde ich verzichten.
__________________
|
Sponsored Links |
|
|||
Soweit mir bekannt ist, lassen sich Checkboxen und RadioButtons tatsächlich nur diversen CSS Tricks manipulieren. Da macht wohl jeder Browser sein eigenes Ding.
Zu deinem Einzug Problem. Zunächst mal solltest du den Code valide machen, wenn du ein 'label for="blabla"' definierst, dass muss das zugehörige Element (die Checkbox) die ID "blabla" bekommen. Ansonsten teste mal folgendes: HTML-Code:
<fieldset> <legend>Legende</legend> <input id="checkbox-" type="checkbox" checked="checked" /> <label for="checkbox-">Lorem ipsum.... .</label> </fieldset> Code:
label { display: block } input[type="checkbox"] { margin-right: 1em; margin-left: 1em; float:left; } |
Sponsored Links |
|
||||
@sailer
Die ID habe ich ergänzt. Dein CSS-Vorschlag funktioniert nicht, siehe: https://codepen.io/fermion/pen/GwBVjR Ich glaube auch nicht, das ein float für einen hängenden Einzug geeignet ist. Vor allem möchte ich das Verhalten der Browser verstehen. Warum funktioniert mein CSS aus dem Ausgangsposting nicht?
__________________
|
|
||||
Danke für Deine Screenshot.
Bei mir sieht der gleiche Codepen anders aus: https://www.dropbox.com/s/gnr3tkphto...38.49.png?dl=0
__________________
|
|
|||
Anderer Browser? ...anderes Betriebssystem?
Aber das sollte den Unterschied nicht erklären - eher schon, dass du nur 50% meines Vorschlages umgesetzt hast. In deinem Code ist der <input...> im <label> enthalten. Schreib das Label mal separat und den Input davor (siehe meinen Beitrag von 10:55) |
|
|||
Nun ja... ich würde mich nicht darauf stützen, was ich für semantisch besser oder schöner finde... ich würde mich schon danach orientieren, was richtig und valide ist. Und da ist schon w3school eine ganz gute Quelle.
https://www.w3schools.com/tags/tag_label.asp |
|
||||
Der Code aus dem CodePen im Ausgangsposting validiert.
https://www.w3.org/TR/html52/sec-for...-label-element Zur Intention zur Verwendung eines Elementes halte ich mich zuerst an die Spezifikation. Dort wird in den Beispiel input explizit als Kind von label gezeigt.
__________________
|
Sponsored Links |
|
|||
Das lese ich allerdings anders...
Zitat:
In deinem Fall, für den Texteinzug des 'Labels', halte ich die Methode mit Positionierung des <inputs...> außerhalb des mit 'label for' versehend <label...> für zielführender. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Formular Element Horizontal anordnen Buttons gehen nicht | Blackhead77 | (X)HTML | 4 | 14.11.2013 17:50 |
Dropdownmenue funktioniert nicht | YandelF | CSS | 5 | 01.09.2012 19:59 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 21:04 |
Validator Fehler und komm nicht drauf... | letslounge | (X)HTML | 3 | 14.09.2006 22:07 |