kefirfromperm3 сен 2012 в 12:20

Кастомизация radiobutton без JS

2 мин

47K

CSS * HTML *

Из песочницы

Комментарии 15

one777 3 сен 2012 в 13:15

Вообще-то лейбл работает на iOS, но необходимо к нему дописать атрибут onclick=""

Mushtat 6 сен 2012 в 11:56

Обьясните, пожалуйста, как это применять, желательно с примером?
Или достаточно просто написать пустой атрибут onclick лейблу?

one777 6 сен 2012 в 13:35

Достаточно просто добавить onclick="" к лейблу. читать здесь

Mushtat 6 сен 2012 в 13:37

Спасибо, своевременно )

Urvin 3 сен 2012 в 13:59

Да и без jQuery можно обойтись:

var lLabels = document.getElementsByTagName('label');
for(var i=0; i < lLabels.length; i++)
{
lLabels[i].onclick = function()
{
document.getElementById(this.getAttribute('fur')).checked = true;
};
}

Для чекбоксов будет чуть поболее:

var lChkBox = document.getElementById(this.getAttribute('fur'));
lChkBox.checked = !lChkBox.checked;

BR0kEN 4 сен 2012 в 07:50

input{display: none;} — так вы скроете все инпуты.
input[type=«radio»] — так — радио.

BR0kEN 4 сен 2012 в 07:51

забыл дописать во второй строке {display: none}
input[type="radio"] {display: none}

kefirfromperm 4 сен 2012 в 08:19

Я вам даже больше скажу, в реальности надо скрывать не все radiobutton. Я пытался минимализировать пример кода, чтобы донести основную мысль.

BR0kEN 4 сен 2012 в 09:55

Естественно. Но как по мне, то сухое input{display: none;}, для статьи со столь громким названием, выглядит по-дилетантски.

Чтобы раскрывать смысл информации, которую хочешь донести, ее важно не сокращать, а упрощать.

rumkin 4 сен 2012 в 11:08

Как в таком случае изменить состояние объекта в зависимости от того выбран он или нет?

kefirfromperm 4 сен 2012 в 13:00

Добавил в CSS.

psywalker 4 сен 2012 в 18:37

Имхо, вместо этих костылей лучше юзать старый добрый хелпер () и стилизовать его как душе угодно. + поддержка IE6+ тоже не маловажно. Я не прав?

psywalker 4 сен 2012 в 18:38

блин, парсер съел код <span class="helper"></span>

kefirfromperm 5 сен 2012 в 01:51

IE6 не нужен

greebn9k 24 фев 2014 в 16:57

В CSS нужно втавить вместо:


label{
    width: 20px;
    height: 20px;
}

вставить:


label{
    width: 30px;
    height: 30px;
    display: inline-block;
}

Без display: inline-block; не отображаются лейблы

Зарегистрируйтесь на Хабре, чтобы оставить комментарий