unForastero

<Webworking>


CSS3 - gestylte Checkboxen und Radio-Buttons!

Samstag, 04 April 2015       







Für alle die schon vertraut sind mit den Möglichkeiten von CSS hier die entscheidende Regel vorweg.
input[type="checkbox"]:checked + label { }
Was schafft diese Regel?  Mit der niedlichen CSS3-Eigenschaft, dem Pseudo Selektor  :checked  ist es uns möglich, ein Element anzusteuern basierend auf dessen Status - also angehakt oder nicht angehakt.

Desweiteren nutzen wir das  "+" als Selektor benachbarter Geschwister (bekannt aus CSS2.1)  und sprechen hiermit das der Checkbox oder dem Radio direkt folgende Element an - in unserem Falle ist das ein Label.

Gut. Bereiten wir unser HTML vor. Die Technik demonstriere ich anhand einer Checkbox, der Prozeß ist identisch für Radio-Buttons, daher spare ich das hier auf. Wir schreiben uns ein Checkbox-Inputfeld gefolgt von einem label. Korrekterweise vergeben wir dem Inputfeld eine ID, damit das Label eine eindeutige Zuweisung zu einem Feld erhält. Um den Label-Inhalt etwas genauer ansprechen zu können, umschreibe ich mit dem Element span.
 
<input type="checkbox" id="c-box-1" name="c1" />
<label for="c-box-1"><span>CheckBox Nummer 1</span></label>

das wichtigste an der Geschichte, das CSS. Der Spaß beginnt. Zuerst verstecken wir die derzeitigen Checkboxen.
input[type="checkbox"] { display:none;}
Und beginnen mit dem Styling und Feintuning bei den Labels bzw. deren Inhalt (span).
input[type="checkbox"] + label span {

    background:url(sprite_sheet.png) left top no-repeat;

    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
}
 
 
WIe zu sehen, gibt es ein Hintergrundbild. Ich habe mich für ein Sprite Cheet entschieden, damit kann man auch ganz easy die Radioboxen verschönern, indem man nur die Background-Position ändert. Die anderen Eigenschaften sind ästhetischer Natur.
Das Bild gibt es hier:

Und damit der angehakte Zustand nun auch angehakt aussieht, wird das Hintergrundbild, das Sprite Cheet verschoben auf die richtige Position.
input[type="checkbox"]:checked + label span {
    background:url(sprite_sheet.png) -19px top no-repeat;
}

Et voila, hier gibt es noch ein Praxis-Beispiel:





diese Seite teilen:




Kommentare












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz