kefirfromperm Sep 3 2012 at 16:20

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

2 min

46K

CSS*HTML*

From sandbox

Comments 15

one777 Sep 3 2012 at 17:15

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

Mushtat Sep 6 2012 at 15:56

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

one777 Sep 6 2012 at 17:35

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

Mushtat Sep 6 2012 at 17:37

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

Urvin Sep 3 2012 at 17: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 Sep 4 2012 at 11:50

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

BR0kEN Sep 4 2012 at 11:51

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

kefirfromperm Sep 4 2012 at 12:19

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

BR0kEN Sep 4 2012 at 13:55

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

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

rumkin Sep 4 2012 at 15:08

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

kefirfromperm Sep 4 2012 at 17:00

Добавил в CSS.

psywalker Sep 4 2012 at 22:37

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

psywalker Sep 4 2012 at 22:38

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

kefirfromperm Sep 5 2012 at 05:51

IE6 не нужен

greebn9k Feb 24 2014 at 20:57

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


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

вставить:


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

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