Marvin Esse: Eigene Checkbox rechts neben Label?

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

  1. @@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 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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

      1. @@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 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. @@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 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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

            1. @@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 🖖

              -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. 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

  2. @@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 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

    Folgende Nachrichten verweisen auf diesen Beitrag:

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

      LG Marvin

      1. @@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 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory