Стилизация переключателя

Question

Я хочу оформить радио кнопки с чистым CSS, без классов или идентификаторов. Просто введите [тип = радио]. Я хочу использовать фоновое изображение для невыбранных и выделенных. Тем не менее, -вендор-внешний вид: нет; не работает с Trident или Gecko. Просто Webkit. В этих браузерах вы можете видеть фоновое изображение в качестве фона для переключателя, но кнопка все еще там, а не просто отображает изображение, как я могу избавиться от кнопки, чтобы отображалось только фоновое изображение. Скрипка: http://jsfiddle.net/7kScn/

Answer 1

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

См .: http://jsfiddle.net/7kScn/1/

Это просто базовый пример, но он работает напредпосылка скрытия поля ввода, а затем стилизация метки сразу после нее, что дает эффект того, что вы проверяете.

Answer 2

Это полезно?вход [type = radio]: проверено {border: 1px сплошной черный;}

Answer 3

Я написал учебное пособие о том, как настраивать флажки и радио только с помощью CSS, а также создавать переключатели вкл / выкл с помощью стилизации метки и использования псевдоклассов :before и :after. Может быть, это поможет :) Прочитайте это здесь: http://blog.felixhagspiel.de/index.php/posts/custom-inputs