web-dev-qa-db-ja.com

入力にバインドされたラベルのCSSセレクター

label属性が設定されたinputフィールドにバインドされたforsを（required属性を介して）選択するCSSの方法はありますか？何かのようなもの：

label:input[required] {
  ...
}

現在、スタイリング用のラベルと入力にclass="required"を追加しています。これで、必須の入力フィールドにHTML5属性required="required"が含まれています。冗長なクラス属性を削除するといいでしょう。

最も近い答え はlabel要素のfor属性を使用していませんが、labelがの入力に直接隣接している必要がありますHTML。

css-selectorscss
28
Ted Bergeron

いかがですか CSS 2属性セレクター ブラウザー間でかなり互換性があります。

例：

<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />

this もチェックしてください。

8
Tom

このソリューションは、ほとんどの最新ブラウザーで機能します。

<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>
5
Umberto Babini

label[for="title"]ここで、「タイトル」は入力のIDです。例：

<label for="title">Title</label>
<input type="text" id="title" name="title">

css：

label[for="title"] {
  color: blue;
}
1
Cristian Oana

これは、OPが望む方法でCSSを介して実際に達成できるとは思いません。 CSSはそのようには機能しません。

私の意見では、より良いアプローチは、前に戻って全体像を見ることです。一部のフィールドが必須で一部が必須ではないフォームがあります。ユーザーにすべての必須フィールドを最初に提供するか、必須フィールドをグループ化して、オプションフィールドとは明確に区別することをお勧めします。

次のような構造を作成できます

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

このアプローチには多くの利点があります。 「required」グループの項目を個別に変更することなく、簡単に追加および削除できます。必要に応じて、チェーンの上位に「必須」クラスを割り当てることができます。フォームに「必須」クラスがある場合、フォーム内のすべてに必須のラベルが付けられます。 'required'クラスを別の場所で呼び出す必要があると判断した場合は、変更を加える場所が少なくなります。そして一般的に、このアプローチはフォームをよりよく整理するのにも役立ちます。必須フィールドとオプションフィールドを混在させないでください。

これをさらに一歩進めて、必要な属性を入力フィールドに挿入するJavaScriptを用意することもできます。

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});
0
mastaBlasta