4

次のhtmlフォームがあります

<div>
    <p>Field1</p>
    <input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
    <p>Field2</p>
    <input type="text" name="fld_two" id="fld_two" required value="" />
</div>

CSSを使用して必須フィールドをそのようにマークしたい

div input[required]:before { color: #f00; content: "*"; }

ただし、この css 行はドキュメントに目に見える変更を加えません。

参考までに、次のようにすべての必須フィールドを変更できました。

div input[required] { background-color: #000; }

TL;DR - 属性セレクターで :before 疑似クラスを使用できますか? もしそうなら、どのように？

4

3 に答える 3

6

:before疑似クラスではなく、疑似要素です。input属性セレクターで使用できますが、置換要素のため、一部のブラウザの要素では使用できません。(ブラウザによっては、動作するかどうかが明確に定義されていないため、ほとんどのブラウザは「いいえ」に傾いています。)

属性セレクターが機能する理由はinput、すべてのブラウザーで一貫して機能する要素自体にスタイルを適用しているためです。

于 2012-09-13T17:39:11.027 に答える
5

疑似要素にはコンテンツがないため、要素では機能しません。input

仕様から：

作成者は、:before および :after 疑似要素を使用して、生成されたコンテンツのスタイルと場所を指定します。名前が示すように、:before および :after 疑似要素は、要素のドキュメント ツリー content の前後のコンテンツの場所を指定します。「コンテンツ」プロパティは、これらの疑似要素と組み合わせて、挿入されるものを指定します。

入力要素には DOM に childNodes がないため、挿入するコンテンツ プロパティはありません。

可能な回避策として、入力要素の代わりに星をラベルに適用します

于 2012-09-13T17:39:45.287 に答える
3

:before<input>は「コンテンツ」がないため有効ではありません -完全な説明については、「入力」要素の前または後の CSS コンテンツの生成を参照してください。

それを行う「伝統的な」方法は、pまたはlabel(ラベルはより意味論的です) に * を挿入することです。

于 2012-09-13T17:41:51.883 に答える