[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか？

質問

を使おうとしています。 :after CSS擬似要素で input フィールドを作成しましたが、うまくいきません。もし、これを span であれば、問題なく動作します。

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

これは動作します（スマイリーを "ブー！" の後と "もっと" の前に配置します）。

<span class="mystyle">buuu!</span>a some more

これはうまくいきません。someValueを赤で着色するだけで、スマイリーは表示されません。

<input class="mystyle" type="text" value="someValue">

別の擬似セレクタを使うべきでしょうか？

注 span の周りに input は、サードパーティのコントロールによって生成されているためです。

解決方法は？

:after と :before は、Internet Explorer 7 以下では、すべての要素でサポートされていません。

また、以下のような置換された要素に使用することは意図されていません。 フォーム要素 (入力)および 画像要素 .

言い換えれば、それは 不可能 を純粋なCSSで使用することができます。

ただし jquery を使用することができます。

$(".mystyle").after("add your smiley here");

.afterのAPIドキュメント

javascriptでコンテンツを追記する場合。これはすべてのブラウザで動作します。