1

ドロップダウン リストのラベルを他の入力タイプとは異なるスタイルにしたいのですが、各ラベルにクラスを割り当てないようにしたいと考えています。ラベルのタイプに基づいてラベルのスタイルを設定することはできますか?

ティア

4

3 に答える 3

3

それはあなたのhtmlがどのように構築されるかに依存します。HTMLの入力の後にラベルを付けると、兄弟セレクターをクリエイティブな方法で使用できます。

HTML：

<div>
<input type="text" value="lorem ipsum" id="lorem" />
<label for="lorem">lorem label</label>

<input type="checkbox" id="check"/>
<label for="check">check label</label>
</div>

css：

input[type="text"] + label {
   color: red;   
}
input[type="checkbox"] + label {
   color: blue;   
}

私はデモンストレーションのために小さなフィドルを設定しました：http：//jsfiddle.net/pLCBP/

とは言うものの、実際のライブでは、おそらく各入力の周りにラッパーdivを配置し、「group」というラベルを付けて、その中にあるフィールドのタイプを示すクラスを指定します。これにより、配置が非常に簡単になります。しかし、ご覧のとおり、あなたが求めることは確かに可能です。

于 2013-01-23T20:38:05.083 に答える
1

Javascript/jQuery を使用する場合は、いくつかのループを実行してラベルを入力タイプに関連付け、スタイルをクラスで処理することができます。

このようなものはうまくいくでしょう

$("label").each(function(){
    var forText = $(this).attr("for");
    $("input").each(function(){
      if($(this).attr("id") == forText){
        var inputType = $(this).attr("type");
        $("label[for="+forText+"]").addClass(inputType);
      } 
    });
  });

ここで実際の動作を見ることができます。おそらくもっとうまく書かれているかもしれませんが、うまくいくでしょう。

于 2013-01-23T20:46:54.753 に答える
1

選択肢 A
いいえ、これはできません。各ラベルに独自のクラスを指定する必要があります。お気に入り

<label for="test" class="inputText">Name:</label><input name="test" id="test" />

CSS

.inputText{} // Label
input[type=text]{} // Input

オプション B
もオプションです。入力/選択後にラベルを使用する場合です。あなたはこれを行うことができます。これ+は、DOM 内の次の要素を選択できるためです。残念ながらそれ-は不可能です。

input[type=text] + label {}
input[type=password] + label {}
input[type=checkbox] + label {}
select + label {}
textarea + label {}
于 2013-01-23T20:25:53.267 に答える