css подсветка label

P

78

pahanmcs

23 октября 2017, 20:54

2739

Здравствуйте

Обычно использую подсветку выбранного label у radio следующим образом:

input:checked+label {

background: #...;

но на одном сайте все построено иначе: <label> вынесен перед <input> и не работает

пробовал и так:

input:focus ~ label,

label:active{

font-weight: bold;

color:red;

}

но это все равно работает только, когда label внутри input

как реализовать подсветку на css, чтобы не переписывать конструкцию половины сайта?

P

78

pahanmcs

24 октября 2017, 20:10

#1

есть мысли у кого?

168

dma84

24 октября 2017, 20:51

#2

В CSS3 нет возможности обратиться к сестринскому элементу, который по коду выше. Либо ждите полной поддержки CSS4, либо меняйте положение элементов в коде.

И да, label не может быть внутри input, только наоборот.

Обычно вы пользуетесь верным вариантом


input:checked + label

или


input:checked ~ label

Quintura: White Label сервиса Интернет стал менее дружественным На турбо-страницах появилась поддержка

300

tommy-gung

25 октября 2017, 06:07

#3

пользуюсь таким:


<label>
  <input>
  <span></span>
</label>

Здесь не могла быть ваша реклама

P

78

pahanmcs

25 октября 2017, 19:23

#4

dma84:
В CSS3 нет возможности обратиться к сестринскому элементу, который по коду выше. Либо ждите полной поддержки CSS4, либо меняйте положение элементов в коде.

И да, label не может быть внутри input, только наоборот.

Обычно вы пользуетесь верным вариантом


input:checked + label

или


input:checked ~ label

Может вы имели ввиду, что правильно <input><label>, а не <label><input> ??

---------- Добавлено 25.10.2017 в 23:36 ----------

tommy-gung:
пользуюсь таким:


<label>

  <input>

  <span></span>

</label>

Как в этом случае на css подсветить label у выбранной radio?

S

469

Sitealert

25 октября 2017, 22:26

#5

pahanmcs:
Может вы имели ввиду, что правильно <input><label>, а не <label><input> ??

Он имел в виду, что вот эта фраза

pahanmcs:
но это все равно работает только, когда label внутри input

лишена какого-либо смысла, потому что невозможно запихать <label> вовнутрь инпута.

---------- Добавлено 26.10.2017 в 01:28 ----------

pahanmcs:
Как в этом случае на css подсветить label у выбранной radio?

В этом случае подсвечивают <span> вышеописанным способом.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

P

78

pahanmcs

26 октября 2017, 20:13

#6

Sitealert:
Он имел в виду, что вот эта фраза лишена какого-либо смысла, потому что невозможно запихать <label> вовнутрь инпута.

---------- Добавлено 26.10.2017 в 01:28 ----------

В этом случае подсвечивают <span> вышеописанным способом.

спасибо, разобрался, со span все работает!

но у меня часть сайта сделана когда label внутри input, часть наоборот

Поэтому и не применялись классы к этой половине

168

dma84

26 октября 2017, 20:55

#7

pahanmcs:
спасибо, разобрался, со span все работает!
но у меня часть сайта сделана когда label внутри input, часть наоборот
Поэтому и не применялись классы к этой половине

Да не может быть label внутри input, хоть убейся.

P

78

pahanmcs

27 октября 2017, 13:10

#8

dma84:
Да не может быть label внутри input, хоть убейся.

http://htmlbook.ru/html/LABEL

Пожалуйста, рассматриваются два случая

---------- Добавлено 27.10.2017 в 17:12 ----------

dma84:
Да не может быть label внутри input, хоть убейся.

<input id="идентификатор"><label for="идентификатор">Текст</label>

168

dma84

27 октября 2017, 13:34

#9

pahanmcs:
http://htmlbook.ru/html/LABEL
Пожалуйста, рассматриваются два случая

---------- Добавлено 27.10.2017 в 17:12 ----------

<input id="идентификатор"><label for="идентификатор">Текст</label>

Приплыли, input не имеет закрывающего тега, label расположен не внутри инпута, а после него.

P

78

pahanmcs

28 октября 2017, 15:00

#10

dma84:
Приплыли, input не имеет закрывающего тега, label расположен не внутри инпута, а после него.

спасибо, "внутри" не так выразился и понял. Весь мой вопрос склонялся только к правильности label перед или после input

В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта