0

私のフォームでは、一般的に HTML ラベルを太字にしたいのですが、ラジオ ボタンやチェックボックスにラベルを付けるときは太字にしないでください。

スタイリングのローカルオーバーライドを必要とせずに、インポートしてデフォルトで動作する CSS でそれを行うにはどうすればよいですか?

ラジオ ラベルの例 (太字にしないでください)

<label for="banana">
<input type="radio" name="banana" id="banana" value="banana" />Banana
</label>

非ラジオ ラベルの例 (太字にする必要があります)

<label for="id">ID</label>
<input type="text" size="12" id="id" name="id" />

ラベルを関連付ける方法は、役立つ場合は変更できます。

ありがとう！

4

5 に答える 5

2

適切なラベルにクラスを与えるか、Javascript を使用しないと、これを行うことはできません。jQueryセレクターを使用すると、次のことができます。

$("label:not(:has(radio))").addClass("boldmenow");
...
.boldmenow {
  font-weight: bold;
}
于 2009-02-17T10:55:35.153 に答える
1

マークアップを次のように拡張した場合:

<label for="banana">
    <input type="radio" name="banana" id="banana" value="banana" /><span>Banana</span>
</label>

次に、この CSS を使用できます。

label {
    font-weight: bold;
}
label span {
    font-weight: normal;
}
于 2009-02-17T11:03:31.700 に答える
1

短い答えは、確実にできないということです。IE6、7、Firefox などの一般的に使用されている多くのブラウザーで動作させようとしている場合は、CSS ではなく JavaScript に依存して、スタイルのルールに適合するドキュメント内の要素を識別し、適用する必要があります。これらの要素のそれぞれにクラスを追加します。

クロスブラウザーの互換性のために、配列されたフィールド ラベルを分類要素でラップするか、ラベルにクラスを適用して通常のラベルと区別する必要があります。

ここで行うことは、ラジオ オプションのリストを順序付けられていないリスト (セマンティックな意味で) にラップし、通常のテキスト フィールドを 1 つの段落にラップすることです。

例: 通常の名前:値のペア:

<div class="form_row">
  <label for="txtFirstName">First Name</label>
  <p>
    <input type="text" class="text" name="firstName" id="txtFirstName" />
  </p>
</div>

そして、Name:Array ペアの場合:

<div class="form_row">
  <label>Gender</label>
  <ul>
    <li><label for="rdoGenderMale"><input type="radio" class="radio" name="gender" id="rdoGenderMale" value="male" />&nbsp;Male</label></li>
    <li><label for="rdoGenderFemale"><input type="radio" class="radio" name="gender" id="rdoGenderFemale" value="female" />&nbsp;Female</label></li>
  </ul>
</div>

適切にスタイルを設定するには、名前ラベルの通常のルールを記述します。

div.form_row label {font-weight:bold;}
div.form_row ul {list-style:none;}
  div.form_row ul label {font-weight:normal;}

hth、ndorfin

于 2009-02-17T12:06:11.753 に答える
0

ラジオ ボタンのラベルにクラスを追加して、異なるスタイルにすることができます。

<label for="banana" class="radio">

次に、CSS はデフォルトでラベルを太字にし、ラジオ ラベルをオーバーライドして通常のラベルにすることができます。

label { font-weight: bold }
label.radio { font-weight: normal; }
于 2009-02-17T10:53:10.993 に答える
0

基本的に、IE がサポートしていないため (代わりにクラスを使用してください) できませんが、IE が適切に機能し、CSS3 が十分にサポートされている場合は、次のような一般的な兄弟セレクターを使用できます。

input[type="radio"]~label {font-weight: bold;}

IE は実際には属性セレクターもサポートしていないことに注意してください。

于 2009-02-17T10:57:47.783 に答える