zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formular-Element "Checkbox": Responsiv mit hängendem Einzug?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.11.2018, 11:08
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard 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.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.11.2018, 11:55
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 83
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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>
mit folgendem CSS:
Code:
label { 
  display: block 
}

input[type="checkbox"] { 
   margin-right: 1em;
   margin-left: 1em; 
   float:left; 
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.11.2018, 12:49
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@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?
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 27.11.2018, 13:32
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 83
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dann erläuter mir doch bitte, was du unter einem hängenden Einzug verstehst, wenn das, was der Code macht, nicht das ist, was du erreichen willst.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.11.2018, 14:39
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Danke für Deine Screenshot.


Bei mir sieht der gleiche Codepen anders aus:
https://www.dropbox.com/s/gnr3tkphto...38.49.png?dl=0
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 27.11.2018, 15:52
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 83
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 27.11.2018, 16:29
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Danke für den Hinweis. Ich hatte tatsächlich übersehen, dass es in Deinem Code input Nachbar und nicht Kind von label ist. Auf Deinem Screenshot ist jedoch wie bei mir.


Ich suche nach einer Lösung für mein ursprüngliches Markup, mit input als Kind von label, weil ich es für semantisch besser halte.
Und nebenbei kann man sich das Attribut for in label auch gleich sparen.

Es muss irgendwas in meinem ursprünglichen Code geben, was verantwortlich dafür ist, dass die Breite von input nicht den 2.5em des text-ident entspricht. Ich werde mir nochmal font-size ansehen.
__________________

Mit Zitat antworten
  #8 (permalink)  
Alt 27.11.2018, 16:41
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 83
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 27.11.2018, 17:00
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

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.
__________________

Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.11.2018, 17:18
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 83
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Das lese ich allerdings anders...
Zitat:
The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.
.. richtig wäre also - sowohl als auch... je nach Verwendungszweck.
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:01 Uhr.