css - 入力タイプでラベルを選択

Question

入力フィールドに似た、入力タイプによってラベルを除外または選択する方法はありますか?

label:not([type=checkbox])
label[type=checkbox] 

Answer 1

チェックボックスにすべて同じもので始まる特定の ID を指定すると、次のことができます。

HTML

<input type="checkbox" id="chkTerms" />
<label for="chkTerms">Read terms & conditions</label>

CSS

label[for*="chk"], label[htmlfor*="chk"]
{
css here
}

ただし、おそらく最新のブラウザのみです。編集: 私はフィドルを試しました:リンクとそれはクロムと IE 8 & 9 で動作しますが、7 では動作しません.私は FF でそれを試しませんでした.

EDIT2：ここで何が起こっているのかを説明するために、角括弧は必要な属性を探します。アスタリスクは、equals の動作を単純な equals から、contains を意味するように変更します。for 属性に「chk」が含まれている場合は、そのスタイルが適用されます。* を ^ に置き換えると、contains ではなく starts with を意味するように変更されます。

EDIT3: BoltClock はコメントで IE7 の修正を提供しました。それを含めるように回答を更新しました。

Answer 2

どうinput[type=checkbox] + label { /*label style here*/ }ですか？テキストが入力要素の直後にある場合に機能する可能性があります。私はそれをテストしていません。

Answer 3

基本的なデータ属性参照でチェックボックスを使用できます..

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
<label for="checkbox-0">Whatever</label>

これを期待していない場合は...お知らせください...