Separate CSS-Datei für label checkbox label input

Habe ich verwendet label für mit Eingabe-Textfelder:

<label for="Username">Username</label>
<input id="Username"  type="text" value="">

und Checkboxen/radioboxes

<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

Die Mühe, die ich habe ist wie kann ich festlegen, unterschiedliche css für die Beschriftungen für die verschiedenen input-Typen.

Wenn ich einen generic-label-css:

label {
    color: #00a8c3;
    line-height: 20px;
    padding: 2px;
    display: block;
    float: left;
    width: 160px;
}

Finde ich, dass ich entweder am Ende mit verschobenem Checkboxen oder schlecht positionierte Textfelder.

InformationsquelleAutor Chris Nevill | 2013-07-31

  1. 13

    Könnten Sie Klassen hinzufügen, um die Etiketten. Zum Beispiel:

    <label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">

<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

    Dann die Klasse verwenden, Werte in CSS:

    label.textbox-label {
 /*some styles here*/
}

label.checkbox-label {
 /*some styles here*/
}

    Alternativ, wenn Sie hatte die Etiketten nach der Eingänge, man konnte wählen wie:

    input[type="text"] + label { 
  /*some styles here*/
}

input[type="checkbox"] + label { 
  /*some styles here*/
}
    Auch Etiketten können über eine id verfügen. Wenn Sie So wollen, einen bestimmten Stil für ein label.
    Perfekt, vielen Dank!

    InformationsquelleAutor Coop

  2. 3

    Könnten Sie schreiben, css-Selektor, wie dies funktionieren wird:

    label[for=Username]{ /* ...definitions here... /} 

label[for=Live] { /...definitions here... */ }

    InformationsquelleAutor Anil Sharma

  3. 0

    Könnten Sie schreiben Sie Ihre css-Selektor wie:

    label[for=Username] 
label[for=Live]

    Können Sie auch einen Blick auf diesen thread:

    CSS-Selektor für die Auswahl ein element VOR ein anderes element?

    InformationsquelleAutor Matthias Holdorf

Schreibe einen Kommentar