Переключатели(радиокнопки)

[@ртемова]

Друзья! У меня есть радиокнопка в ссылке. Сам <input> работает нормально, по ссылке переходит. Но когда я задаю для него display: none; , дабы скрыть и с помощью <label> красиво оформить эти кнопки, переход по ссылке уже не происходит, хотя оба тега завернуты в ссылку. Вопрос: как с помощью <label> переходить по ссылке?
<li>
   <a href="{{ page }}/">
      <input type="radio" name="point" id="slide1" checked>
         <label for="slide1"></label>
   </a>
</li>

css:
.paginator a{
text-decoration: none;
}
.paginator li{ display: inline;
}
.paginator label:after {
border: 2px solid black;
content: " ";
display: block;
height: 20px;
left: -4px;
position: absolute;
top: -4px;
width: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
label {
cursor: pointer;
display: inline-block;
height: 15px;
margin: 25px 12px 0 16px;
position: relative;
width: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s; 
}
label:hover, #slide1:checked ~ label:nth-of-type(1), #slide2:checked ~ label:nth-of-type(2){
background: black;
}
#slide1:checked ~ .slider > .slide1 , #slide2:checked ~ .slider > .slide2{
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }

Edited April 13, 2016 by @ртемова

[satantx]

А css файл приложите к коду

[SelenIT]

  On 4/13/2016 at 11:18 AM, @ртемова said:

У меня есть радиокнопка в ссылке. Сам <input> работает нормально, по ссылке переходит

Expand  

???

Что значит «<input> работает», если происходит переход по ссылке (уничтожая старую страницу, вместе с <input>-ом и его состоянием) и появляется совершенно новая страница? Это ссылка работает, а <input> здесь как-то вообще ни при делах. Да и по спецификации нельзя вкладывать в ссылку интерактивные элементы.

В чем конечная задача? Сделать навигационное меню, стилизованное под список радиокнопок?

[@ртемова]

  On 4/13/2016 at 11:27 AM, SelenIT said:

???

Что значит «<input> работает», если происходит переход по ссылке (уничтожая старую страницу, вместе с <input>-ом и его состоянием) и появляется совершенно новая страница? Это ссылка работает, а <input> здесь как-то вообще ни при делах. Да и по спецификации нельзя вкладывать в ссылку интерактивные элементы.

В чем конечная задача? Сделать навигационное меню, стилизованное под список радиокнопок?

Expand  

Здесь получается что-то в виде слайдера, но с пагинацией. Переключение происходит за счет радиокнопок

Edited April 13, 2016 by @ртемова

[Dlynnyj]

<li>
     <input type="radio" name="point" id="slide1" checked>
     <label for="slide1"><a href="{{ page }}/">Какоето Описание</a></label>
</li>

for="point" забыл еще поменять

Edited April 13, 2016 by Dlynnyj

[@ртемова]

  On 4/13/2016 at 12:14 PM, Dlynnyj said:

<li>
     <input type="radio" name="point" id="slide1" checked>
     <label for="slide1"><a href="{{ page }}/">Какоето Описание</a></label>
</li>

for="point" забыл еще поменять

Expand  

Спасибо!!! Работает

[Dlynnyj]

не за что обращайтесь))))

[SelenIT]

  On 4/13/2016 at 11:34 AM, @ртемова said:

Переключение происходит за счет радиокнопок

Expand  

Переключение слайдов слайдера? Или страниц пагинации? Если второе — то, скорее, не «за счет», а «несмотря на».

  On 4/13/2016 at 12:20 PM, @ртемова said:

Спасибо!!! Работает

Expand  

Вообще говоря, не должно и тем более не гарантировано. В мобильных браузерах и т.п. могут быть сюрпризы.

Можно всё-таки увидеть пример решаемой задачи в действии? Думаю, есть смысл потратить еще полчаса и найти решение, не противоречащее стандартам и общей логике.

[wwt]

зачем вообще радиокнопку помещать в ссылку?