Задать вопрос
@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;
}
  • Вопрос задан
  • 808 просмотров
Комментировать
Подписаться 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;
}


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы