Как по-разному стилизовать ярлыки разных типов?

Question

В моих формах я хочу сделать метки 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" />

То, как я ассоциирую ярлыки, можно изменить, если это поможет.

Спасибо!

Answer 1

Вы не можете сделать это, не назначив нужные метки классу или не используя Javascript. С помощью селекторов jQuery вы можете сделать это:

$("label:not(:has(radio))").addClass("boldmenow");
...
.boldmenow {
  font-weight: bold;
}

Answer 2

Короткий ответ: вы не можете, надежно. Если вы пытаетесь заставить его работать в ряде широко используемых браузеров, таких как IE6, 7, Firefox и т. Д., Вам придется полагаться на JavaScript, а не на CSS, чтобы идентифицировать элементы в вашем документе, которые соответствуют вашим правилам для стиля и применения класс для каждого из этих элементов.

Для кросс-браузерной совместимости вам нужно будет обернуть метки полей в массиве в классифицирующий элемент или применить классы к меткам, чтобы отделить их от обычных меток.

Что бы я здесь сделал, это обернул список из опций радио в (не) упорядоченный список (для смыслового значения) и обычные текстовые поля в один абзац.

например. Нормальное имя: пара значений:

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

А затем для Имени: Пара массивов:

<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

Answer 3

Если вы расширили разметку до следующего:

<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;
}

Answer 4

По сути, вы не можете этого сделать, потому что IE не поддерживает его (поэтому используйте вместо этого класс), но если IE работал правильно и CSS3 был хорошо поддержан, вы могли бы использовать общий селектор брата, например, так:

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

обратите внимание, что IE там на самом деле не поддерживает селектор атрибутов.

Answer 5

Вы можете добавить класс к меткам для переключателей, а затем оформить их по-разному.

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

Тогда CSS может по умолчанию сделать метки жирными, а затем переопределить их для радио, чтобы сделать их нормальными.

label { font-weight: bold }
label.radio { font-weight: normal; }