Задать вопрос
@l_stl_st
html

Стилизация label для radiobutton. Почему оно так ведет себя?

Хочу добавить стиль для лейблов радио. Хочу сделать это именно так, без классов. Почему стиль применяется только для одного лейбла?

codepen.io/l-st/pen/pyJGVX

И сюда тоже код вложу:

HTML
<body>
	<label for="radio1">Radio1</label>
	<input type="radio" name="radio" id="radio1" value="Radio1" required>
	<label for="radio2">Radio2 </label>
	<input type="radio" name="radio" id="radio2" value="Radio2">
</body>

CSS
label{
	display:inline-block;
	vertical-align:top;
}
input[type="radio"] + label{
	margin-top:100px;
}
  • Вопрос задан
  • 813 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал. 
*[type="radio"] + label{
	margin-top:100px;

}
Ответ написан
4 комментария
4 комментария
@l_stl_st Автор вопроса
Нашёлся интересный способ.
Если у вас есть ещё варианты, напишите. Вот всё, что у меня:

В CSS нет селектора для предыдущего элемента - здесь сказали
В CSS нет селектора для лейбла по типу (возможно, будет) - здесь сказали

Пожалуй, это главное, что я хотел выяснить.

Если без классов и без jquery, можно сделать через id вот так (нашёл здесь; оказывается, CSS может найти id по первым нескольким символам, если добавить в селектор звездочку):

HTML
<body>
	<label for="radioName1">Radio1</label>
	<input type="radio" id="radioName1" name="radio" value="Name1">
	<label for="radioName2">Radio2</label>
	<input type="radio" id="radioName2" name="radio" value="Name2">
</body>


CSS
label{
	display:inline-block;
	vertical-align:top;
}
label[for*="radio"]{
	margin-top:100px;
}


Но это будет почти то же самое, что сделать класс.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы