Hinzufügen von ein Grad-symbol nach Inhalt mit CSS
Weiß ich, dass ich hinzufügen kann, ein Grad-symbol in HTML mit "°", und ich bin auf der Suche an Beispielen der CSS-Verwendung :nach dem Selektor und der content-Eigenschaft, aber ich habe Schwierigkeiten, setzen Sie alle zusammen.
Will ich eine Grad-symbol zu zeigen, bis, nachdem Sie den text, der angezeigt wird, in ein Eingabefeld ein.
<div class="threshold">
<input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>
Und CSS:
.threshold input:after {
content: "°"
}
Aber das scheint nicht zu funktionieren. Irgendwelche Ideen auf, wie man es beheben. Ich konnte speichern Sie das Grad-symbol in dem Wert, aber das würde erfordern eine Menge extra javascript für Dinge wie die überprüfung und so weiter. Jeder Weg, es zu tun mit CSS?
Vielleicht
Ich habe immer einfach nur die tatsächlichen Charakter gibt, eher als die Einheit.
Wie unten diskutiert, eine HTML-Lösung ist besser als Bildschirm-Leser hätten kein Konzept von der Maßeinheit, die Sie für Ihr Textfeld. Ich würde behaupten, pseudo-CSS-Elemente nicht verwendet werden sollte in diesem Zusammenhang, und sollten reserviert werden, für die Anzeige/styling nur. Wenn Sie ein label hinzufügen, um die textbox, die enthält die Maßeinheit, die dann eine CSS-Lösung für das Grad-symbol nicht akzeptabel ist.
Nur nicht ein deaktiviertes input-element. Es meist keinen Sinn macht (ein element, das Eingaben akzeptiert, aber nicht akzeptieren-Eingang).
entfernen deaktiviert löst das problem nicht.
input.threshold:after {
helfen?Ich habe immer einfach nur die tatsächlichen Charakter gibt, eher als die Einheit.
Wie unten diskutiert, eine HTML-Lösung ist besser als Bildschirm-Leser hätten kein Konzept von der Maßeinheit, die Sie für Ihr Textfeld. Ich würde behaupten, pseudo-CSS-Elemente nicht verwendet werden sollte in diesem Zusammenhang, und sollten reserviert werden, für die Anzeige/styling nur. Wenn Sie ein label hinzufügen, um die textbox, die enthält die Maßeinheit, die dann eine CSS-Lösung für das Grad-symbol nicht akzeptabel ist.
Nur nicht ein deaktiviertes input-element. Es meist keinen Sinn macht (ein element, das Eingaben akzeptiert, aber nicht akzeptieren-Eingang).
entfernen deaktiviert löst das problem nicht.
InformationsquelleAutor BishopZ | 2013-01-11
Du musst angemeldet sein, um einen Kommentar abzugeben.
Probieren Sie etwas wie dieses
HTML
CSS
DEMO: http://jsfiddle.net/Tt2hU/ ODER http://jsfiddle.net/Tt2hU/1/
Sie können hinzufügen
span
wie diese demo jsfiddle.net/Tt2hU/1 oder Grad vordiv
Warum ist es '\00b0\ und nicht '\0176'?
Das Grad-Zeichen in unicode ist
U+00B0
so\00b0
InformationsquelleAutor Enve
Dies könnte helfen: Kann ich das :after-pseudo-element ein input-Feld?
Scheint es, kann es nicht möglich sein in CSS mit einem input-tag.
InformationsquelleAutor 97ldave
funktionieren sollte, wie dies
Grad° erfolgt einfach, indem
JonKers Guter Punkt
InformationsquelleAutor Mick Jones
Sie haben, um in ein entflohener Verweis auf die hexadezimale Unicode-Zeichen mit dem Wert (aus hier)
DEMO
InformationsquelleAutor Andy
HTML-entities funktioniert nicht in CSS verwenden, würden Sie eine Zeichen-code Einheit, D. H. ein umgekehrter Schrägstrich gefolgt von einer hexadezimal-Zeichen-code:
Allerdings funktioniert dies nur auf die regulären Elemente, nicht input-Elemente.
Demo: http://jsfiddle.net/Guffa/AcxEG/
.threshold input:after
Meinst du in der demo? Da der Selektor nicht wählen Sie den Eingang, verwendet es nur eine Klasse. Ich behielt die ursprüngliche Auswahl in der Antwort halten Sie es im Einklang mit der Frage.
InformationsquelleAutor Guffa