[解決済み】「input」要素の前後でCSSコンテンツ生成【重複あり

質問

Firefox 3とGoogle Chrome 8.0では、以下のように期待通りに動作します。

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

しかし、その要素が <input> :

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

なぜ思ったように動かないのか？

どうすればいいですか？

と :before と :after の前 (または後) に挿入するコンテンツを指定します。 コンテンツ をその要素の中に入れてください。 input 要素にはコンテンツがありません。

例えば、以下のように記述した場合 <input type="text">Test</input> (これは間違いです) ブラウザはこれを修正し、テキストを の後に を入力します。

唯一できることは、すべての入力要素をspanかdivで囲み、これらにCSSを適用することです。

の例をご覧ください。 仕様 :

例えば、次のような文書断片とスタイルシートがあります。

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...は、次の文書断片とスタイル・シートと全く同じようにレンダリングされる。

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

に対して機能しないのと同じ理由です。 <br> , <img> など( <textarea> は特殊なようです）。