Wie kann ich die Farbe ändern von label-mit * im text

Habe ich Etiketten wie diese

<label> User Type*: </label>

Nun gibt es eine Möglichkeit zum ändern der Farbe der Beschriftung auf rot, wenn Sie text enthält, * in der es nur mit CSS

Alles was ich tun kann, ist, Bearbeiten css. Ich kann kein Javascript.

  • Nein. Dies ist nicht möglich, mit reinem CSS. Hier ist eine einfache Lösung mit jQuery - jsfiddle.net/kR6Cs
  • die * in einem anderen element wie span (<span>*</span>), dann style-span
  • CSS kann nicht Zugriff auf alles innerhalb des DOM, also CSS kann nicht schauen Sie sich den text innerhalb der <label> element und wählen Sie einen Stil entsprechend.
  • Bist du nicht auch erlaubt das Bearbeiten der mark-up, und dann setzen Sie eine Klasse, um für Sie zu Steuerelement die text-Farbe von der Beschriftung?
InformationsquelleAutor user1994660 | 2014-05-16
  1. 5

    Nein, ohne javascript ist es nicht in der Lage sein Stil nur die *. was Sie tun müssen, ist, um die * in seinem eigenen element, und Stil-element.

    Beispiel:

    HTML

    <label> User Type<span>*</span>: </label>

    CSS

    label span { color: red; }

    Beispiel Geige: http://jsfiddle.net/Ee9L3/

    EDIT: sieht aus wie ich falsch verstanden, die Frage. Nein es gibt keine Möglichkeit, das zu tun, was Sie wollen. Die einfachste alternative wäre, einfach eine Klasse hinzufügen, um das label.

    HTML

    <label class='required'>User Type*: </label>

    CSS

    label.required { color: red; }
    • Aber das ändert nur die Farbe der * nicht das Etikett.
    • Wie es scheint, der OP will eine änderung der Farbe des label wenn es enthält eine *.
    • ah, falsch verstanden, die Frage, danke.
    InformationsquelleAutor kennypu
  2. 0

    Gibt es keine Möglichkeit zu ändern, nur * in CSS. Ich würde empfehlen, etwas wie das zu tun:

    <label> User Type<span class="red">*</span></label>

    Wenn Sie können nicht ändern die HTML -, können Sie von Glück sein. Ich denke, man könnte etwas tun, wie dieses in Ihrem CSS:

    label:after {
   content: "*";
   color: red;
}
    • was bedeutet der obige css-code tun
    • Es schaffen würde, eine weitere * aber es wäre rot. jsfiddle.net/N7Bq7 :nach nicht die größte Unterstützung, die mit älteren Versionen des IE.
    InformationsquelleAutor Seanevd
  3. 0

    Sorry, aber Wenn du das nicht Bearbeiten können den html und nicht javascript verwenden - es gibt keine Möglichkeit, das zu tun dieses nur mit css (noch?!)

    InformationsquelleAutor b_uk_happy
  4. 0

    CSS3 hatten einen sehr kurzlebig :contains() pseudo-class, wenn ich mich richtig erinnere. Leider wurde es entfernt von der Spezifikation und es gibt keine Möglichkeit, dies zu tun mit CSS allein.

    IE hatte ein Mittel zum befestigen von JavaScript-Verhalten zu CSS durch .Die HTC-Dateien. Aber das funktioniert nur im IE und nicht in jedem anderen browser, es ist also keine gute Antwort.

    Müssten Sie irgendeine Art von JavaScript-oder Zugriff auf das HTML selbst. Das ist der einzige Weg. Sorry.

    InformationsquelleAutor nhavar
  5. 0

    Ist dies ganz einfach. Das ist eine Mischung aus vorherigen Antworten.

    HTML:

    <label class='required'>Direcció <span class="red">*</span></label>

    CSS:

    label.required>span.red{ color: red; }
    InformationsquelleAutor Carlos J.
Schreibe einen Kommentar