Смена маркера при выборе элемента списка

[PavelTkachev]

Есть нумерованный список. Нужно, чтобы по клику цифра превращалась в галочку, и наоборот. Скажите, это возможно реализовать без JavaScript, только на CSS3?

[Great Rash]

Возможно. Читайте про list-style-image.

[PavelTkachev]

А я думал сделать через

   li {    list-style-type: none;   }   li:before {    content: "";   }

+ fontello

Клики можно сделать через css?

[PavelTkachev]

Вот что у меня получается

http://jsfiddle.net/cujcsrws/

 

Как сделать, чтобы список был по центру? margin:0 auto; не помогает.

 

Как сделать, чтобы подчёркивание и цвет фона не заходили на индекс?

[PavelTkachev]

Только через list-style-image можно сделать?

[Great Rash]

Ну почему же, можно через бекграунды, псевдоэлементы, обычные элементы. Просто мне кажется, list-style-image логичней всего.

[PavelTkachev]

Просто мне нужна адаптивность. И я думал шрифт использовать. SVG если туда вставить, то он будет автоматически увеличиваться?

[Great Rash]

Опишите задачу подробней.

[PavelTkachev]

Есть список пронумерованный. Когда нажимаешь на какой-то из пунктов, то число с точкой заменяется на галочку, при этом у остальных элементов порядковые номера не меняются. И наоборот, если была галочка, то на число с точкой, которое соответствует порядковому номеру элемента в списке. Всё это должно адаптироваться под разные разрешения экрана - это я решаю изменением размера шрифта при моноширинном шрифте. Галочка должна увеличиваться вместе с размером шрифта.

Edited December 26, 2014 by PavelTkachev

[Aleksandr.L]

PavelTkachev, а в чем причина отказа от JavaScript? Ведь так намного проще.

[PavelTkachev]

Поскольку в основном пишется под мобильники, то априори считается, что css не будет тормозить в отличие от JavaScript.

[Great Rash]

Ну как-то так - http://codepen.io/GreatRash/pen/GgjyWo

[PavelTkachev]

Ого-го! Спасибо! И я ушёл разбираться.