Eigene Checkbox rechts neben Label?

[Marvin Esse]

Hallo,

ich versuche mich an ein paar eigene Checkbox-Stile, bei denen die Checkbox rechts neben dem Label erscheinen soll. Aber es scheint so nicht zu funktionieren, denn die Grafik wird linksbündig unter den Label-Text gepappt.

input[type=checkbox] {
	display:none;
}

input.icon[type=checkbox] + label {
	display:inline-block;
	background: url('/images/icon_unchecked.jpg') no-repeat;
	min-height:33px;
	padding: 0 100 0 0px;
}

input.icon[type=checkbox]:checked + label {
	display:inline-block;
	background: url('/images/icon_checked.jpg') no-repeat;
	min-height:33px;
	padding: 0 100 0 0px;
}

<input type="checkbox" class="icon" value="None" id="test" name="test"  />
<label for="test"><span class="supersmall">0777</span> Test:</label>

Kann mir jemand verraten, wo der Fehler liegt?

LG Marvin

[Gunnar Bittersmann]

@@Marvin Esse

Aber es scheint so nicht zu funktionieren, denn die Grafik wird linksbündig unter den Label-Text gepappt.

Das ist der Defaultwert der background-position-Eigenschaft. Wenn du was anderes willst, musst du das angeben.

LLAP 🖖

[Marvin Esse]

Hallo Gunnar,

ich hätte gerne die Grafik einen festen Wert (daher hatte ich auf das Padding gesetzt) rechts neben dem Label. Mit background-position:left ändert sich (zwangsläufig) nichts, mit right erscheint die Grafik komplett nach rechts gerückt. Die Pixel-Angabe verhält sich ja auch absolut zum linken Rand und nicht relativ zum Label-Ende. Kann ich das so also nicht erreichen?

LG Marvin

[Gunnar Bittersmann]

@@Marvin Esse

ich hätte gerne die Grafik einen festen Wert (daher hatte ich auf das Padding gesetzt) rechts neben dem Label.

Da steckt auch noch ein Fehler: padding: 0 100 0 0px; ist ein ungültiger Wert. Bei der 100 fehlt die Maßeinheit; bei 0px ist keine erforderlich.

Außerdem macht es keinen Sinn, die Angabe für input.icon[type=checkbox]:checked + label nochmals zu wiederholen.

mit right erscheint die Grafik komplett nach rechts gerückt. Die Pixel-Angabe verhält sich ja auch absolut zum linken Rand und nicht relativ zum Label-Ende. Kann ich das so also nicht erreichen?

Den Wert für padding-right entsprechend der Grafik anpassen?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

mit right erscheint die Grafik komplett nach rechts gerückt. Die Pixel-Angabe verhält sich ja auch absolut zum linken Rand und nicht relativ zum Label-Ende. Kann ich das so also nicht erreichen?

Den Wert für padding-right entsprechend der Grafik anpassen?

Oder sowas wie background-position: calc(100% - 42px)

Übrigens is px keine besonders gut geeignete Einheit zur Verwendeung in CSS. Die meisten Maße (wenn sie keine Prozentwerte sind) sollten sich auf die Schriftgröße des Elements bzw. des Wurzelelements beziehen, also in em bzw. rem angegeben werden.

LLAP 🖖

[Marvin Esse]

Oder sowas wie background-position: calc(100% - 42px)

ist auch nicht viel besser als background-position: 24em 0em; Sobald mal ein unerwartet längerer Label-Text vorkommt, werden sich Text und Grafik überlappen. Da werde ich wohl entweder die Grafik vor dem Label setzen oder komplett umbauen und mit display:table-cell arbeiten müssen.

Danke Dir dennoch für die hilfreichen Tipps.

LG Marvin

[Gunnar Bittersmann]

@@Marvin Esse

Sobald mal ein unerwartet längerer Label-Text vorkommt, werden sich Text und Grafik überlappen.

Warum sollten sie das tun? Hast du irgendwo eine Breite für die Label angegeben?

Du kannst die Grafik übrigens auch in einem label::after-Pseudoelement unterbringen.

LLAP 🖖

[Marvin Esse]

Da steckt auch noch ein Fehler: padding: 0 100 0 0px; ist ein ungültiger Wert. Bei der 100 fehlt die Maßeinheit; bei 0px ist keine erforderlich.

Wahrscheinlich war der Browser sonst bisher tolerant, denn er hat das fehlende "px" nicht angemeckert. Aber auch padding: 0px 100px 0px 0px; hat bei mir keinen Einfluss auf die Position der Grafik.

Außerdem macht es keinen Sinn, die Angabe für input.icon[type=checkbox]:checked + label nochmals zu wiederholen.

ok, das hat sich durch Copy&Paste so ergeben, werde ich entfernen.

LG Marvin

[Gunnar Bittersmann]

@@Marvin Esse

input[type=checkbox] {
	display:none;
}

Kann mir jemand verraten, wo der Fehler liegt?

Du darfst die Checkbox nicht mit display: none verstecken. Damit ist sie nicht mehr in der Tab-Reihenfolge und auch das zugehörige Label ist per Tastatur nicht erreichbar.

Nur visuell verstecken – wie bei diesen Radio-Buttons.

LLAP 🖖

[Marvin Esse]

Ich hab sie jetzt anstelle vom display:none mit position:absolute; visibility:hidden; versteckt.

LG Marvin

[Gunnar Bittersmann]

@@Marvin Esse

Ich hab sie jetzt anstelle vom display:none mit position:absolute; visibility:hidden; versteckt.

Nei-en! visibility: hidden wirkt ebenso wie display: none – das Element wird aus dem accessibility tree komplett entfernt.

Ich sagte doch: visuell verstecken.

LLAP 🖖