CSS vertical align checkbox label – Webdesign Tutorial

Von Never Code Alone
0 Kommentar
CSS Vertical Align

Die Ausrichtung von Inputfeldern mit „CSS vertical align“ ist immer wieder eine Herausforderung beim Frontent Webdevelopment. Formulare sind das wichtigste Element auf kommerziellen Internetseiten und ein wesentlicher Erfolgsfaktor für professionelles Webdesign. Aus genau diesem Grund muß man sich hier auch die größte Mühe bei geben, damit man den User auch von seinem Formular überzeugt. Hier zählt neben der guten Usability und Accessibility auch das mit HTML und CSS umgesetzte Layout.

CSS vertical align checkbox label
CSS vertical align checkbox label

Da ja immer noch das 1er HTTP Protokoll genutzt wird, sind die Formularelemente selber allerdings noch aus dem letzten Jahrtausend. Das ist zwar schwer vorstellbar, aber dennoch die Wahrheit. Formularelemente zur Eingabe, wie Radio-Buttons, Checkboxen und auch Drop-Down Menus können hier immer wieder nicht zeitgemäß im Layout auffallen. Das alleine wäre aber nicht so schlimm, gäbe es nicht zusätzlich noch Probleme mit ihrer Ausrichtung. Hier gibt es natürlich viele Design Vorlagen und auch Frontend Frameworks, wie Bootstrap, die natürlich schnelle und robuste Lösungen für unterschiedliche Browser und Versionen bieten. Ob man mit diesem technologischen Overkill allerdings auf technische Probleme schießen sollte ist weiterhin fraglich und schlecht für Performance und Ladezeit.

CSS vertical align checkbox label

Bei Checkboxen gibt es eine Möglichkeit diese global über das CSS anzusprechen und richtig zu positionieren. Die folgenden Angaben zur bottom Positionierung sind natürlich abhängig von der Schriftgröße, die man auf der Internetseite einsetzt.

HTML
<label class="checkbox-label"><input type="checkbox" value="115">-middle</label>

CSS
label.checkbox-label input[type=checkbox]{
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

Einen jsfiddle Link zu dem Code Beispiel gibt es hier http://jsfiddle.net/576wT/

Tutorials und Top Posts

Gib uns Feedback

Diese Seite benutzt Cookies. Ein Akzeptieren hilft uns die Seite zu verbessern. Ok Mehr dazu