Как поменять фон checkbox css
Перейти к содержимому

Как поменять фон checkbox css

  • автор:

Нестандартные checkbox

Стильно оформить элемент формы input type=»checkbox». Так выглядит обычный чекбокс:

обычный чекбокс в ff обычный чекбокс в opera
обычный чекбокс в ff обычный чекбокс в opera

В дизайне же могут быть оформлены совершенно по другому:

примеры стилизированных чекбоксов

Обычные чекбоксы практически не поддаются изменению внешнего вида — ни размеры, ни бордюры, ни фон, ни тем более цвет и вид галочки изменить нельзя (по крайней мере кроссбраузерно). Это сделано разработчиками браузеров, для того что элементы управления оставлять на всех сайтах одинаковыми, что сделает их узнаваемыми для посетителей, что в свою очередь повысит удобность (юзабилити) сайтов. В данной статье не будет подниматься вопрос о целесообразности и корректности изменения внешнего вида элементов форм и как это отобразится на удобстве для пользователя. Задача — научиться менять вид чекбоксов, т.к. довольно часто приходится на практике с этим сталкиваться.

При внедрении красивого чекбокс будем придерживаться следующих требований:

  • точное соответствие дизайну
  • программистам работать с таким чекбоксом должно быть так же как с обычным (значения передаются в том же виде)
  • при загрузке страницы вид чекбокса устанавливается в зависимости от значения
  • простота реализации
  • минимум дополнительного кода в html
  • минимум веса скрипта
  • кроссбраузерность
  • соответствие стандартам

Решение

Алгоритм очень простой:

  1. оборачиваем обычный input type=»checkbox» в контейнер
  2. задаем оформление этому контейнеру
  3. скрываем input внутри этого контейнера
  4. с помощью javascript делаем нестандартный чекбокс рабочим

В качестве контейнера идеально подходит — нейтральный строчный элемент. Строчный, а если точнее inline-block, нам нужен для того чтоб можно было задать размеры элементу (width / height) и при этом он вел себя как обычный чекбокс (находится на одном уровне с другими полями формы и текстом).

Для избежания недоразумений лучше явно задать начальное значение полю (value=»off» или value=»on»). Для CSS подготовим картинки для двух состояний чекбокса или можно воспользоваться техникой спрайтов — одна склеенная картинка:

.niceCheck < width: 17px; height: 17px; display: inline-block; cursor: pointer; background: url(paht-to/checkbox.png); >.niceCheck input

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

Скрипт на jQuery

Т.к. практически во всех своих проектах использую библиотеку jQuery чекбокс оживляю тоже с помощью этой библиотеки (скачать можно на официальном сайте jQuery). Подключаем скрипты:

где содержимое jquery.checkbox.js это:

  

Update — убраны специально введенные значения on и off, т.к. поведение чекбоксов для серверных скриптов немного отличалось. Теперь привязываем оформление к наличию атрибута checked.

Недостаток метода — обязательное наличие библиотеки весом примерно 20-54 Kb в зависимости от версии. Если используешь в своих проектах jQuery — это недостатком не является, если нет, тогда можно воспользоваться чистым javascript.

Решение на javascript без библиотек

Менем немного html

Обрати внимание, что если на странцие несколько чекбоксов, контенерам нужно указать уникальные id (нужны для определения состояния полей при загрузке страницы):

CSS остается тем же, а javascript будет таким:

  

update — вышеприведенные примеры имеют ряд недостатков:

  • если у пользователя отключен javascript, с этим чекбоксом ничего не сможет сделать
  • довольно примитивная имитация реального checkbox (не предусмотрен атрибут disabled, tabindex и прочее)

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

  • при отключенном javascript на странице остаются обычные checkbox
  • менять значение можно кликами по связанному с полем label (через атрибут for)
  • поле блокируется атрибутом disabled
  • сохраняется порядок tab обхода
  • сохранять значение поля (value), если таковое есть

Стильный checkbox с более высокими требованиями

В форме обычным checkbox, которым хотим изменить внешний вид добавляем

В стилях добавляем оформление для заблокированного поля (класс .niceCheckDisabled, для которого подготавливаем отдельную картинку) и checkbox прячем вместо display: none отрицательным отступом (для того чтобы поле могло получать фокус и изменять значение по клику на label)

.niceCheck < width: 17px; height: 17px; display: inline-block; cursor: pointer; background: url(path-to/checkbox.png); overflow: hidden; >.niceChecked < background-position: 0 -17px; >.niceCheck input < margin-left: -100px; /* можно задать побольше чтобы наверняка скрыть поле */ >.niceCheckDisabled < background-image: url(path-to/checkbox-disabled.png); >

Заметка: для скрытия натурального checkbox тут уже используется отрицательный отступ и overflow у контейнера. Иначе в IE не будет работать смена состояния поля по клику на метку, т.к. при display: none поле не может получить фокус.

Усложнился скрипт, работает с jQuery 1.3.2:

jQuery(document).ready(function()< jQuery(".niceCheck").each( /* при загрузке страницы меняем обычные на стильные checkbox */ function() < changeCheckStart(jQuery(this)); >); >); function changeCheck(el) /* функция смены вида и значения чекбокса при клике на контейнер чекбокса (тот, который отвечает за новый вид) el - span контейнер для обычного чекбокса input - чекбокс */ < var el = el, input = el.find("input").eq(0); if(el.attr("class").indexOf("niceCheckDisabled")==-1) < if(!input.attr("checked")) < el.addClass("niceChecked"); input.attr("checked", true); >else < el.removeClass("niceChecked"); input.attr("checked", false).focus(); >> return true; > function changeVisualCheck(input) < /* меняем вид чекбокса при смене значения */ var wrapInput = input.parent(); if(!input.attr("checked")) < wrapInput.removeClass("niceChecked"); >else < wrapInput.addClass("niceChecked"); >> function changeCheckStart(el) /* новый чекбокс выглядит так  новый чекбокс получает теже name, id и другие атрибуты что и были у обычного */ < try < var el = el, checkName = el.attr("name"), checkId = el.attr("id"), checkChecked = el.attr("checked"), checkDisabled = el.attr("disabled"), checkTab = el.attr("tabindex"), checkValue = el.attr("value"); if(checkChecked) el.after(""+ ""); else el.after(""+ ""); /* если checkbox disabled - добавляем соотвсмтвующи класс для нужного вида и добавляем атрибут disabled для вложенного chekcbox */ if(checkDisabled) < el.next().addClass("niceCheckDisabled"); el.next().find("input").eq(0).attr("disabled","disabled"); >/* цепляем обработчики стилизированным checkbox */ el.next().bind("mousedown", function(e) < changeCheck(jQuery(this)) >); el.next().find("input").eq(0).bind("change", function(e) < changeVisualCheck(jQuery(this)) >); if(jQuery.browser.msie) < el.next().find("input").eq(0).bind("click", function(e) < changeVisualCheck(jQuery(this)) >); > el.remove(); > catch(e) < // если ошибка, ничего не делаем >return true; >

Как сделать выбор всех checkbox

Алгоритм: меняем всем полям (input), вложенным в контейнер с классом .niceCheck, значение атрибута checked на true. Затем контейнерам с классом .niceCheck добавляем класс .niceChecked. Пример:

jQuery("#chooseAll").click( /* выбрать | снять выделение все checkbox */ function() < if(jQuery(this).val()=="выбрать все") < jQuery("#myForm .niceCheck >input").attr("checked",true); jQuery("#myForm .niceCheck").addClass("niceChecked"); jQuery(this).val("снять у всех выделение"); > else < jQuery("#myForm .niceCheck >input").attr("checked",false); jQuery("#myForm .niceCheck").removeClass("niceChecked"); jQuery(this).val("выбрать все"); > return; >);

Динамическое добавление checkbox

  • дабавляется checkbox с классом niceCheck
  • вызывается функция changeCheckStart, параметром которой является ссылка на добавленный checkbox
/* динамическое добавление checkbox */ jQuery("#addCheck").click( function() < jQuery("#testForm").append("
"); var el = jQuery("input.niceCheck"); changeCheckStart(el); >);

По теме

  • Кастомные checkbox и radio на CSS3
  • Стилизация элементов формы — подборка решений
  • Нестандартные select
  • Нестандартные input
  • Нестандартные input type=file
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      Как добавить background для input type=»checkbox»?

      Потому что мы не можем нормально кастомизитовать инпуты, создавайте отдельный label для инпута, привязывайтесь к нему, инпут скрывайте, а label как хотите кастомизируйте, и через псевдокласс :checked меняйте label

      P.S: Первая же ссылка в гугле

      Ответ написан более двух лет назад
      Комментировать
      Нравится 2 Комментировать
      Ответы на вопрос 0
      Ваш ответ на вопрос

      Войдите, чтобы написать ответ

      html

      • HTML
      • +1 ещё

      Как быстро менять ссылки Django?

      • 1 подписчик
      • час назад
      • 21 просмотр

      Изменить фон у отмеченного checkbox

      Author24 — интернет-сервис помощи студентам

      Собственно задача заключается в следующем: есть форма с кучей разных чекбоксов. Как сделать, чтобы при нажатии на чекбокс (ставим галочку) у него появился фон, а когда убераем галочку, то и фон пропадал.

      Лучшие ответы ( 1 )
      94731 / 64177 / 26122
      Регистрация: 12.04.2006
      Сообщений: 116,782
      Ответы с готовыми решениями:

      Как изменить фон ячейки(строки), при клике в checkbox.
      Как изменить фон ячейки(строки), при клике в checkbox. Как в hotmail’e Спасибо

      Как записать в mysql значение отмеченного checkbox через ajax? И как удалить?
      Более сузил свой поиск. Есть страница с несколькими checkbox. <input type="checkbox" name="po".

      Записать в TextBox значение отмеченного CheckBox
      На форме — панели в которой динамически добавляется n textbox и n кнопок, а также есть textbox и.

      Изменить class элемента с помощью onmouseover, например изменить фон ячейки в таблице
      Можно ли изменить class элемента, с помощью onmouseover, например изменить фон ячейки в таблице

      Изменение чекбоксов с помощью CSS

      Приклад

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

      Изменение чекбоксов с помощью CSS

      Когда, то давно, для изменения внешних видов чекбокса использовались JavaScript-решения, но теперь уже это не нужно. С появлением CSS3, эта проблема отпала и уже дано. Тем неимение, многие не знают или просто не встречали возможного решения. Лично я, тоже не сразу узнал об этом методе, но уже где-то с 15 года использую его при верстках лендингов или каких-то форм. Если Вам не нравится то как выглядит обычный чекбокс и вы хотите придать ему более современный внешний вид, то нужно будет выполнить всего несколько действий. В итоге у вас получится так как на примере.

      Пример

      Такой стильный чекбокс делается с помощью псевдоселекторов :checked и :not. По своей сути мы будим эмулировать работу чекбокса, а сам чекбокс станет невидимым.

      В первую очередь вам нужно определится с чекбоксом, который вы будете модифицировать. Если это будут все чекбоксы на сайте, то просто стили нужно добавлять классу чекбоксов, что и будет показано в примере. В общим, у вас будет чекбокс и он должен будет иметь несколько обязательных параметров. К примеру у Вас вот такой код:

      Вам нужно его доработать и сделать таким:

        

      Разберем по порядку обязательные параметры:

      • class=check — добавляем класс, чтобы все чекбоксы у которых будет этот класс имели измененный вид.
      • id=newchec — добавляем айди, для того, чтобы подвязать к чекбоксу label. Так же, если вам нужно выделить лишь один чекбокс, то можете не добавлять класс, а прописывать стили для этого самого айди. Естественно, и класс и айди может иметь любое название.
      • label — вторая строка, которая отвечает за вывод метки к нашему чекбоксу. Ее наличие обязательно. Даже если вам не нужна метка, то всеравно нужно добавить label, даже пустой.
      • for=newchec — идентификатор элемента, с которым следует установить связь. В нашем случаи это наш чекбокс. Как понимаете Значение for должно соответствовать id нашего чекбокса.

      Если вы правильно оформили будущий модифицированный чекбокс, то можно приступать к самому главному — добавление CSS стилей чекбоксу. В нашем случаи мы будем добавлять стили для класса check, который мы присвоили нашему чекбоксу.

      Открываете файл стилей и добавляете туда такой кусок кода:

      .check < vertical-align:top; margin:0 3px 0 0; width:10px; height:10px; >.check + label < cursor:pointer; >.check:not(checked) < position:absolute; opacity:0; >.check:not(checked) + label < position:relative; padding: 0 0 0 60px; >.check:not(checked) + label:before < content: '';position: absolute; top:0; left:0; width:40px; height:20px; border-radius:10px; background: #CDD1DA; box-shadow:inset 0 2px 3px rgba(0,0,0,.2); -webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.2); -moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.2); >.check:not(checked) + label:after < content:''; position:absolute; top:0; left:2px; width:20px; height:20px; border-radius:10px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); -webkit-box-shadow:0 2px 5px rgba(0,0,0,.3); -moz-box-shadow:0 2px 5px rgba(0,0,0,.3); transition: all .2s; >.check:checked + label:before < background:#2ebbde; >.check:checked + label:after

      Для тех кто разбирается в CSS, становится все понятно после его осмотра. Чего-то сложного здесь нет. Для тех, кто еще не совсем легко в этом разбирается, немного распишу. Учить CSS я тут не буду, мне лень расписывать каждый параметр, для этого есть книжки по CSS.

        Первым делом — задаем стили для старых версий браузера IE. Тут просто немного ровняется стандартный чекбокс.

      .check
      .check + label
      .check:not(checked)
      .check:not(checked) + label
      .check:not(checked) + label:before
      .check:not(checked) + label:after
      .check:checked + label:before
      .check:checked + label:after
      .hec:focus + label:before

      Естественно, вы можете все менять на свой лад. Методом проб и ошибок подгоните все как нужно именно вам. Согласитесь, такой чекбокс намного симпатичнее стандартного. Если понравился данный метод, надеюсь вы используете его в будущем на своем сайте. В следующей статье покажу как схожим методом модифицировать круглую радиокнопку.

      На этом все, спасибо за внимание. ��

      Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *