CSS3：入力後の擬似要素

Question

ちょうど:beforeと:afterで遊んでいます。

inputボタンで使用することはできないようですか？私は潜在的にそれが必須フィールドのアスタリスクを表示する使用することができると思った。必ずしもそうではない私は、ちょうどのオプションを何をするか

input { 
    position: relative; 
} 
input:after { 
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px; 
} 

同じコードが、残念ながら最も簡単な方法は私も同じことが、有用であろうと考えましたli

li { 
    clear: both; 
    margin: 0 0 10px; 
    position: relative; 
} 
li:after { 
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px; 
} 

Answer 1

に正常に動作しますが、私はのように、前後の擬似要素をSPANタグでラップし、それにクラスを適用することによって、前後の疑似要素を得ることができました。

この議論はinput:afterが動作しない理由として、いくつかの洞察を提供しています。 http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

あなたのような何かを行うことができます：この答え（ライン下のテキスト）

.required:after { 
    content: "REQUIRED"; 
    color: orange; 
    margin-left: 1em; /* space between the input element and the text */ 
    padding: .1em; 
    background-color: #fff; 
    font-size: .8em; 
    border: .1em solid orange; 
} 

<span class="required"><input id="foo" /></span> 

Answer 2

をしません（とにかくテキストベースのinputの場合）ですが、同じ手段で同じ最終結果を達成しようとするのは面倒です。これを実行する唯一の方法は、@Tim notes, in his answerのように、spanなどの別の要素にinput（またはその他の）要素をラップし、次にののスタイルを:after疑似要素に設定することです。

JS Fiddle demo of a working example。 position: absolute:afterコンテンツは、（ボタンの内側、またはチェックボックスなど）の要素自体の中に表示されずに

---

UMが、彼らは、ことを除いて、JS Fiddle demoかなりいい仕事するように見えます。

HTML：

<button class="req">button</button> 
<input class="req" type="text" /> 
<input class="req" type="radio" /> 
<input class="req" type="checkbox" /> 
<textarea class="req"></textarea> 

はCSS：

input, 
textarea { 
    display: block; 
} 
.req { 
    position: relative; 
} 

.req:after { 
    content: "*"; 
    margin: 0 0 0 0.5em; 
    position: absolute; 
    top: 0; 
    right: -1em; 
} 

Answer 3

私はちょうど同じことに見えた - 私だけがアクセスキーを表示するためにそれを使用したい：

*[accesskey]:after { 
    content:' [' attr(accesskey) ']'; 
} 

そう熱心ではありませんアクセスキーの値を2つ以上の場所に書き込む必要がある場合、通常は値を同じに保たないというリスクが追加されますそれは難しいでしょう。UE-wise = 0/

Answer 4

これは入力が必要でしたが、WordpressとJqueryで生成されたhtmlを変更するアクセス権がありませんでした。まあ、私はできるかもしれないが、それは長い回避策でした。同じ理由：アクセシビリティ。

だから、あなたが使用することはできません一つの可能​​な修正：

#comment-form input[type=text], 
#comment-form input[type=email], 
#comment-form input[type=url], 
#comment-form input[type=password] { 
width:40%; margin-right:60%; } 

をエラーメッセージが後になれば、それはバンプます&同じ行に収まらなくなっできます。もちろん、レイアウトのパーセンテージの幅をサポートできるかどうかを検討する必要がありますが、そのアイデアは得られます。

Answer 5

アン本質的に同一の質問は偉大な説明を持っていることをここ頼まれました：https://stackoverflow.com/a/4660434/749227

を要約すると、入力がコンテナではなく、子供を持つことができません。 ：beforeおよび：after擬似要素によって挿入された内容は、通常、入力に挿入できません。

その入力のための「回避策」がありますので、あなたは、子供を持つことができた<button>を使用することができるのではなく<input type="submit|button">を使用してノート（まあ、あなたがマークアップを管理している場合は、）