CSS3 Radio button. Между label и input дополнительный тэг

artemhp · August 8, 2012

Сделал реализацию переключателя таким способом:



<!DOCTYPE html>
 <html>
 <head>
 <title>Title of the document</title>
 <style type="text/css">
input[type="radio"]{
    opacity: 0;
    position: absolute;
}
input[type="radio"] + label::before{
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin: 0 8px 0 0;
    background: green;
    vertical-align: middle;
}
input[type="radio"]:checked + label::before{
    background:red;
    } 
 </style>
 </head>

 <body>
 <form action="" name="form">
 <input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
 <input type="radio" name="test" id="second" value="2" /><label for="second">Second</label>
 </form>
 </body>

 </html>

И работает всё отлично. Всё бы хорошо, но модуль, к которому я делаю этот стиль рендерит в одном месте один переключатель с такой структурой:


 <input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label>

Следовательно я дополнительно пропишу то же самое для селектора:

input[type="radio"]:checked + script + label::before

и получается:



<!DOCTYPE html>
 <html>
 <head>
 <title>Title of the document</title>
 <style type="text/css">
input[type="radio"]{
    opacity: 0;
    position: absolute;
}
input[type="radio"] + label::before,
input[type="radio"] + script + label::before{
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin: 0 8px 0 0;
    background: green;
    vertical-align: middle;
}
input[type="radio"]:checked + label::before,
input[type="radio"]:checked + script + label::before{
    background:red;
    } 
 </style>
 </head>

 <body>
 <form action="" name="form">
 <input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
 <input type="radio" name="test" id="second" value="2" /><script type="text/javascript">var a = 0;</script><label for="second">Second</label>
 </form>
 </body>

 </html>

Последняя реализация работает в Opera, но не работает в Chrome. Помогите решить, что бы заработало в Chrome

Edited August 8, 2012 by artemhp

artemhp · August 27, 2012

Никто не посоветует?

keltanas · August 27, 2012

Оберни каждый input+label в какой-нибудь div


<div class="input-wrapper">
  <input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
</div>

и пиши стили отталкиваясь от него.Будет во всех браузерах работать.

artemhp · August 27, 2012

On 8/27/2012 at 9:18 AM, keltanas said:
Оберни каждый input+label в какой-нибудь div
<div class="input-wrapper">
  <input type="radio" name="test" id="first" value="1" /><label for="first">First</label>
</div>
и пиши стили отталкиваясь от него.Будет во всех браузерах работать.

Спасибо за ответ, но решение не подойдет так как:

1. У меня к разметке особого доступа нету. Рендерится без меня.

2. Оборачивается он то в li, то div, и нет в том контейнере никакого обозначения, что там переключатель.

keltanas · August 27, 2012

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

Ну есть еще вариант: напиши на jquery каком-нибудь плагинчик, который повесит нужные классы к нужным элементам. А этим классам задай стили, которые хочешь применить.

wwt · August 27, 2012


...
input[type="radio"] + script ~ label::before
...
input[type="radio"]:checked + script ~ label::before
...

так и в опере и в хроме пашет

Edited August 27, 2012 by wwt

artemhp · August 27, 2012

On 8/27/2012 at 10:30 AM, keltanas said:
Чем ждать у моря погоды пол месяца, я бы давно уже в этот модуль влез и исправил что надо.

Та работы просто хватает. А от кастомных переключателей пришлось пока отказаться. Да и влезть и исправить нельзя, это написание темы для плагина в котором рендерятся разметка с разных блоков системы, которые редактировать нельзя. И jQuery как бы мне хотелось, тоже нельзя. Есть подключаемый файл стилей только.

On 8/27/2012 at 11:36 AM, wwt said:
...
input[type="radio"] + script ~ label::before
...
input[type="radio"]:checked + script ~ label::before
...
так и в опере и в хроме пашет

Спасибо большое, о ~ и не знал. Это может быть и решением, даже если ещё какие теги непредсказуемо появляться будут))

Edited August 27, 2012 by artemhp

artemhp · September 3, 2012

Подскажите, а если така вот конструкция?

<span><input type="radio"></span><label>Test</label>

Как построить селектор, что бы получить доступ к Label только переключателей?

Ведь если сделать что то такое:

span ~ label

, то мы получим доступ абсолютно ко всем лейблам, будь там в спане переключатель или текстовое поле.

Спасибо

Sign In

CSS3 Radio button. Между label и input дополнительный тэг

Question

artemhp

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

artemhp

Link to comment

Share on other sites

keltanas

Link to comment

Share on other sites

artemhp

Link to comment

Share on other sites

keltanas

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

artemhp

Link to comment

Share on other sites

artemhp

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information