css - CSS でコンテンツの後に度記号を追加する

Question

「°」を使用して HTML に度記号を追加できることは知っており、:after セレクターと content プロパティを使用した CSS の例を見ていますが、すべてをまとめるのに苦労しています。

入力ボックスに表示されるテキストの後に度記号を表示したい。

<div class="threshold">
    <input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>

そしてCSS：

.threshold input:after {
    content: "&deg;"
}

しかし、それはうまくいかないようです。それを修正する方法についてのアイデア。度記号を値に格納することはできますが、検証などのために多くの追加の JavaScript が必要になります。CSSでそれを行う方法はありますか？

score 12 · Accepted Answer

このようなことを試してください

HTML

<div class="threshold">
    <input type="text" value="12" name="thresholdSelect" disabled="disabled">
</div>

CSS

.threshold:before {
    content: "\00b0"
}

デモ: http://jsfiddle.net/Tt2hU/またはhttp://jsfiddle.net/Tt2hU/1/

score 4 · Accepted Answer

CSS で入力タグを使用することはできないようです。

score 3 · Accepted Answer

このように動作するはずです

度°は、次のように単純に実行されます

<p>degrees&#176;</p>

score 3 · Accepted Answer

16 進数の Unicode 文字値へのエスケープされた参照を入力する必要があります(ここから)

::after {
  content: "\00b0";
}

score 2 · Accepted Answer

HTML エンティティは CSS では機能しません。文字コードエンティティ、つまりバックスラッシュの後に 16 進数の文字コードを使用します。

.threshold input:after {
  content: "\00b0";
}

ただし、これは通常の要素でのみ機能し、入力要素では機能しません。

5 に答える 5