追加：後続：有効CSS疑似クラス

Question

疑似要素を純粋なCSSの特定タイプ/クラスの:enabled疑似クラスに追加することはできますか？試料として

、フィード・バックに基づいて、私は無効になっラジオ周囲に境界線を持たないことを望む（:after要素を中心としないために私を許して）：https://jsfiddle.net/msdobrescu/z398jjoj/20/

Answer 1

のようなセレクタを使用しています。これは、私が信じているフォーム要素で一般に使用されています。要素に:disabledを宣言していない限り、:enabledがデフォルトの状態です。

はまた、フォーム要素のほとんどは、このような<input>、<select>、および<textarea>など任意の擬似要素を持ってすることはできません...しかし、いくつかは、そのような<button>として、許可されています。擬似要素を持っていない、あなたは同じ結果を達成するためにspanタグで兄弟セレクタ+または~を使用できる要素については

button:enabled:after { 
 
    content: "*" 
 
}

<button>Button</button> 
 
<button enabled>Button</button> 
 
<button disabled>Button</button>

。あなたのコードに基づいて

input[type="radio"]:enabled + span:after { 
 
    content: "*" 
 
}

<input name="test" type="radio"> 1 <span></span> 
 
<input name="test" type="radio" enabled> 2 <span></span> 
 
<input name="test" type="radio" disabled> 3 <span></span>

例として、また、円の中心にラジオを作りました。

• jsFiddle - 変更されたマークアップ構造を持つプレーンCSS。

• jsFiddle - jQueryと元のマークアップ構造。

Answer 2

:afterが唯一持っている要素で動作することができますタグを閉じる+それはタグ<select>で動作しません。 :enabledは通常フォームで使用されるため、一緒には機能しません。

フォームで作業する場合<div>に要素をラップし、:afterを追加する方が簡単です。

問題をよりよく理解するために、コードを共有することもできます。

Answer 3

これはできません。フォーム要素に:beforeまたは:after疑似を追加することはできません。基本的には、コンテナ要素内にレンダリングされます。

あなたができる最善のは、あなたの入力のほかに、空の要素を持っている、spanを言うと:enabled CSSの擬似クラスは、任意の有効な要素を表し

input[type=text]:enabled + span:after { 
    /* Props goes here */ 
}