Как сделать следование за :checked?

Question

[Николай]

Здравствуйте! Для примера имеем:

[css]

label { padding: 10px; margin: 10px; }
input[type="radio"] { display: none; }
input[type="radio"]:checked + label { border: 1px solid red; }

[html]

<input id="a" name="one" type="radio" checked> <label for="a">one</label>
<input id="b" name="one" type="radio"> <label for="b">one</label>
<input id="c" name="one" type="radio"> <label for="c">one</label>

(или то же самое на jsfiddle)

Необходимо что бы красный прямоугольник перемещался (ездил) за кликом по инпуту, а не исчезал-появлялся.
Не соображу, как это искать в поисковике, не то что сделать х_Х

Answer 1

[Дмитрий]

https://jsfiddle.net/soledar10/tr6w3hux/

Comments

[Николай]

Спасибо)

Answer 2

[Vitaly Sivkov]

Вот, возьмите за основу: https://css-tricks.com/creating-an-animated-menu-i...

Answer 3

[Stalker_darkway]

Я бы обернул все инпуты в див, в нем создал бы еще один со стилями как у вас лейбла и он бы катался по клику к нужному инпуту.