@PaulMaly21 мая 2012 в 08:02

Простая кастомизация Checkbox и Radio

4 мин

261K

Веб-разработка *

+35

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

@ga4o 21 мая 2012 в 08:14

кастумизация — нет такого слова

@xtazz 21 мая 2012 в 08:16

Лично для меня смысл совершенно понятен. Спасибо за статью.

@ga4o 21 мая 2012 в 08:21

если уж и использовать такие слова, то хотябы писать их без ошибок — кастОмизация

@PaulMaly 21 мая 2012 в 08:25

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

@0mm 21 мая 2012 в 08:27

Карова доёт харошее малако — тоже не лишено смысла, но ведь вы не будете так писать

@xtazz 21 мая 2012 в 08:31

не согласен. это ошибка в русском слове. а кастомизация — это больше жаргон. меня тоже немного напрягло, но не настолько чтобы троллить на эту тему.

@nickostyle 26 мая 2012 в 18:05

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

@ssneg 21 мая 2012 в 08:41

Смесь английского с нижегородским, почти по Грибоедову :)

@resurection 21 мая 2012 в 16:46

Тогда уж костюмизация — одевание новой шкурки (костюмов) на чекбоксы, радиобатоны.

НЛО прилетело и опубликовало эту надпись здесь

@PaulMaly 21 мая 2012 в 08:21

> кастумизация — нет такого слова

На мой взгляд это вполне прижившая в среде разработчиков «русификация» от англ. customization. Правильный перевод этого термина имеет достаточно большую длину, чтобы использовать его. К тому же итак понятно что имеется ввиду.

@Alinaki 21 мая 2012 в 08:23

кастомизация. кастомайзинг. и не только у разработчиков, но везде. Но никак не кастумизация.

@PaulMaly 21 мая 2012 в 08:28

«эджекс» — а не «аякс», как как произносят многие российкие разработчики. «майэскюэль», вместо «майсиквел» как произносит один мой знакомый очень уважаемый разработчик с 25 летним стажем. что это меняет то? мне теперь ему на это указывать каждый раз? привычка.

@SerDIDG 21 мая 2012 в 08:40

А с каких пор буква s начала читаться как си? MySQL правильно произносить как «майэскьюэл».

@PaulMaly 21 мая 2012 в 08:44

Если бы вы работали также долго как он, то знали бы почему многие «деды» произносят именно так. В любом случае, читайте историю.

@SerDIDG 21 мая 2012 в 08:46

А я поправил не его, а вас )

@PaulMaly 21 мая 2012 в 08:50

Вы задали вопрос, я ответил.

@SerDIDG 21 мая 2012 в 08:53

А по теме, статья понравилась, добавил в избранное на будущее.

@PaulMaly 21 мая 2012 в 08:54

Спасибо.

@nicothin 21 мая 2012 в 10:37

Семантически верный перевод: стилизация. Длина этого слова меньше используемого автором.
(меня тоже дико раздражают всякие кустомизации, коворкинги и краудфандинги)

@Anonym 21 мая 2012 в 08:43

А opacity:0 + спрайт не работает?

@PaulMaly 21 мая 2012 в 08:54

Кому как нравится. Лично я использую этот способ. Для меня он удобнее.

@artishok 21 мая 2012 в 08:58

Скрытые инпуты работаю в ИЕ?

@PaulMaly 21 мая 2012 в 09:00

само свойство hidden к сожалению нет, поэтому в css еще добавлено display: none; для данных типов input.

@AlexSpark 21 мая 2012 в 09:55

Тут помимо этого присутствует псевдоэлемент :before, который не работает в IE7.
Для него придется использовать expression, либо добавлять какой-нибудь пустой тег вместо :before.

Ну, и еще IE7 не поддерживает :checked и :disabled, тоже придется писать костыль…

НЛО прилетело и опубликовало эту надпись здесь

@AlexSpark 21 мая 2012 в 11:26

IE8 тоже не поддерживает :checked, :enabled и :disabled, а статистика говорит, что его доля среди российских юзеров немного больше, чем у IE9

НЛО прилетело и опубликовало эту надпись здесь

@AlexSpark 21 мая 2012 в 11:40

Думаю, да, другого варианта здесь нет :)
Только если заказчик будет сильно упираться, чтобы и в нем все выглядело красиво, то придется выкручиваться…

НЛО прилетело и опубликовало эту надпись здесь

@extensible 21 мая 2012 в 08:58

Ок, а как вы текст будете менять в label без JS в зависимости от состояния чекбокса?

@SerDIDG 21 мая 2012 в 09:00

А в каком случае его нужно менять? В стандартной реализации текст в лейбле тоже не меняется.

@extensible 21 мая 2012 в 09:05

Ах да, верно. Меня смутили захадкоденые надписи в лэйбле вроде «checked», «disabled», итд.

@PaulMaly 21 мая 2012 в 09:05

В данном конкретном случае, мне это не нужно. Если вы имеете ввиду чекбоксы в стиле iPhone, то там тоже нет каких-то существенных проблем.

НЛО прилетело и опубликовало эту надпись здесь

@Kottenator 21 мая 2012 в 09:03

Ваш способ прекрасен до того момента, как вы попробуете на ваши инпуты нажать.

Данная реализация не работоспособна. Вот это её убивает:

 input[type="checkbox"],

 input[type="radio"] {

 display:none; 

}

@extensible 21 мая 2012 в 09:06

А что в этом не так? Элементы формы не будут отсылаться при отправке на submit? Если так, то способов как их скрыть кроме display:none множество.

@PaulMaly 21 мая 2012 в 09:07

Все работает совершенно корректно. Такие input'ы не только нажимаются, но и без проблем отправляются в формах.

@Kottenator 21 мая 2012 в 09:14

Виноват, не заметил атрибута «hidden». Без него — всё плохо.

@Kottenator 21 мая 2012 в 09:05

Ещё один минус текущей реализации:

Вы расчитываете на то, что сначала в HTML идёт input, а затем — label. Очень часто — наоборот. Не могли бы показать модификацию для такого случая?

@dom1n1k 21 мая 2012 в 09:26

А еще нередко бывает, когда input и label не идут в потоке подряд. Например, находятся в разных ячейках таблицы.

@PaulMaly 21 мая 2012 в 09:59

Я рассматриваю конкретный случай, взяв для этого классическую разметку как «по учебнику». Целью было показать идею, одну из многих, которая может для кого-то оказаться удобной. Для каждого случая свои инструменты. В случае если label идет впереди input возможно лучше использовать другой способ.

@GearHead 21 мая 2012 в 10:55

бессмысленно класть input в какое-то отдельное от label место, если он display: none. проблема высосана из пальца.

@artishok 21 мая 2012 в 09:14

Важным моментом является только то, что нужно указывать id для каждого input и for для label, чтобы связать их.

Можно ведь тег input поместить внутри контейнера label и таким образом избавимся от написания

id для каждого input и for для label

@Kottenator 21 мая 2012 в 09:19

Да, для radio и checkbox очень часто используют именно такую конструкцию. Но мне кажется, что в этом случае внедрить подход, который предлагает автор, на чистом CSS будет весьма сложно.

@extensible 21 мая 2012 в 09:28

Как-то так: label > input::before

НЛО прилетело и опубликовало эту надпись здесь

@extensible 21 мая 2012 в 11:30

Не проверял, не знаю. Но даже если и не сработает, то можно рядом с инпутом поместь пустой элемент, например <i/>, и в нем отображать нужный флажок.

В CSS-е будет что-то вроде label > input:checked + i { display:inline-block; }

НЛО прилетело и опубликовало эту надпись здесь

@SerDIDG 21 мая 2012 в 09:26

А если я кликну на зону лейбла, где инпут не дотягивается, разве произойдёт ивент?

@torbasow 21 мая 2012 в 10:28

Что значит «инпут не дотягивается»? Событие вызывается по клику на самом лейбле.

НЛО прилетело и опубликовало эту надпись здесь

@xtazz 21 мая 2012 в 11:07

Вообще возможность связать label и input предусмотрена самим HTML и для checkbox и radio считается хорошим тоном. Автор просто предложил вариант использования этой возможности для кастомизации этих контролов.

НЛО прилетело и опубликовало эту надпись здесь

@PaulMaly 21 мая 2012 в 11:16

Спасибо за полезную информацию.

НЛО прилетело и опубликовало эту надпись здесь

@SerDIDG 21 мая 2012 в 11:59

Точно, забыл про всплытие.

НЛО прилетело и опубликовало эту надпись здесь

@SerDIDG 21 мая 2012 в 13:02

Просто, честно сказать, в первый раз узнал о конструкции инпута внутри лейбла.

@torbasow 22 мая 2012 в 03:09

Да говорят же Вам: это работает независимо от помещения инпута внутри лейбла (если только они связаны через id/for), это не всплытие.

@SerDIDG 22 мая 2012 в 12:01

Я понял, спасибо, просто прочитал так, как будто если в лейбл всунуть инпут без id/for. Ещё раз извините за глупость. )

НЛО прилетело и опубликовало эту надпись здесь

@faiwer 21 мая 2012 в 13:44

Селектора по потомку в актуальном CSS

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

@opposit 21 мая 2012 в 12:49

Мда, в статье про «Простую кастомизация Checkbox и Radio» результат оформлен картинкой :)

@xtazz 22 мая 2012 в 05:02

А чем по-вашему он должен быть оформлен?

@PaulMaly 22 мая 2012 в 11:18

Добавил ссылку на демо

@opposit 22 мая 2012 в 14:13

Да у меня, собственно, претензий-то и не было особых :) Просто, дойдя в тексте до картинки, попытался пощелкать по чекбоксам. Не получилось :)

@IDMan 21 мая 2012 в 20:53

Работал с каким-то плагином аналогичного назначения, возникла проблема из bind на разные события. Плагин сделали, кнопки нажимаются, все счастливы, вот только не учли, что помимо картинки оно должно еще и работать.

@PaulMaly 22 мая 2012 в 05:04

Не уловил суть. В статье речь идет как раз об отсутствии необходимости использования каких-либо сторонних костылей, в виде js-плагинов в их числе.

@IDMan 22 мая 2012 в 10:06

И куда я смотрел… Извините, ошибся, ваш метод действительно много надежней.

@FB3 22 мая 2012 в 08:51

А сами спрайты, отображающие состояние, кликабельны ведь, да? Я просто не сильно клиентский программист, поэтому интересуюсь. А рабочего примера не выложили, как раз было бы очень кстати, я бы тогда не задавал таких глупых вопросов :)