Css стилизация radiobutton: Стилизация Radio Button

15+ плагинов jQuery для радио кнопок и стилей флажков

Сегодня мы представляем вам список из более чем 15 плагинов jQuery Radio Button & Checkbox Style — коллекция простых, легких, удобных в использовании плагинов для радио кнопок и флажков с использованием jQuery. Наслаждайтесь! 🙂

Обновление 29/09/13: добавлен 17. jQuery Uniform Plugin

Похожие сообщения:

• 10 JQUERY IPHONE СТИЛЬ ПЛАГИНЫ

1. jQuery prettyCheckable

Этот плагин заменяет стандартные флажки и радиовходы для лучшего вида.

Источник + Демо

2. iCheck

Настраиваемые флажки и переключатели для jQuery и Zepto.

Исходный Демо

3. ScrewDefaultButtons

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

Источник + Демо

4. Необычные флажки и переключатели с CSS

Многие молодые пушки спрашивают о том, как оформить пользовательские флажки и переключатели в формах. Я подготовил типичную разметку, несколько строк CSS и некоторые функции JavaScript (включая исправление поведения меток Safari).

Исходный Демо

5. Калипто

Основной плагин для использования простого спрайта и CSS вместо флажка или переключателя.

Источник + Демо

6. Стили CSS и jQuery Custom Checkbox и переключатели ввода

Стилизовать флажки и переключатели для соответствия индивидуальному дизайну практически невозможно, поскольку ни один из них не поддерживает базовый CSS, например, цвета фона или изображения; даже сложно заставить поля появляться одинаково во всех браузерах.

Исходный Демо

7. JQuery плагин Radiobutton

Это очень простой плагин для радиокнопок для jQuery. Это простой, легкий и легко поддающийся стилизации.

Источник + Демо

8. Niceforms

Ненавязчивый метод javascript, позволяющий полностью настраивать веб-формы.

Исходный Демо

9.

Легкая реализация флажка в индивидуальном стиле для jQuery 1.2.x и 1.3.x.

Источник + Демо

10. jqTransform

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

Источник + Демо

11. Флажки iOS

iphone-style-checkboxes реализует переключатели iPhone в качестве замены стандартных флажков HTML.

Источник + Демо

12. jQuery Fancy Custom Радио-кнопка и флажок

Радио-кнопка и флажок jQuery Fancy Custom

Исходный Демо

13. iPhone стиль радио и флажки переключаются с использованием jQuery и CSS

Отличный интерфейс для панели администрирования, в комплекте с великолепно выглядящими формами и кнопками.

Источник + Демо

14. Флажок jQuery и стилизация переключателей

Кросс-браузерный флажок и сценарий переключателя.

Исходный Демо

15. Плагин jQuery — переключатели изображений

Он размером всего 2 КБ и превращает ваши обычные переключатели в изображения, вы можете установить любые изображения, которые вам нравятся, для src, флажка и наведения.

Исходный Демо

16. ezMark: флажок jQuery и плагин Radiobutton

Небольшой плагин jquery дает возможность стилизовать флажки и радиокнопки.

Исходный Демо

17. jQuery Унифицированный плагин

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

Источник + Демо

Создание улучшенного переключателя с использованием CSS3

У нас возникли идеи, как улучшить переключатели, о которых мы рассказали в уроке «Создание переключателя с использованием CSS3». Мы поставили перед собой следующие вопросы. Как применить переключение к радиокнопкам? Как повысить удобство? Почему переключатели не работают в старых версиях мобильных браузеров на движке Webkit?

Мы внесли изменения, так что посмотрите демонстрацию работы и исходный код.

Поддержка радиокнопок 

Простая задача для начала. Радиокнопки работают почти так же, как переключатели-флажки, так что мы можем просто добавить класс switch (переключатель) каждому полю ввода, чтобы   все заработало, например:

<div>
<input type="radio" name="radio" />
<label for="radio1">first radio button</label>
</div>
<div>
<input type="radio" name="radio" checked="checked" />
<label for="radio2">second radio button</label>
</div>
<div>
<input type="radio" name="radio" />
<label for="radio3">third radio button</label>
</div>

Очень приятно посмотреть, как два переключателя меняют положение одновременно.

Улучшенное удобство 

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

Дополнительных элементов не потребовалось, мы просто использовали символ крестик вместо пробела и расположили его справа на фоне, используя свойство text-indent:

input. switch:empty ~ label:before
{
	content: '2718';
	text-indent: 2.4em;
	color: #900;
}

Когда переключатель-флажок или радоикнопка активны, символ меняется на галочку и сдвигается влево по фону:

input.switch:checked ~ label:before
{
  content: '2714';
  text-indent: 0.5em;
  color: #6f6;
}

Работающая во всех браузерах анимация CSS3

Изначально мы разместили символы галочку и крестик на белой части переключателя. Это непростая задача для браузеров, так как им нужно создать переход между двумя символами. В браузере Firefox все отработало правильно, а браузеры Chrome и Internet Explorer 10 пошли по легкому пути: вообще не воспроизводили анимацию. Оказалось, что движки Webkit и Trident не разрешают анимацию псевдо-элементов, чье содержимое меняется, даже если однозначно указать, что только внешний отступ или цвет должны анимироваться.

Чтобы решить эту проблему, мы применили галочку и крестик псевдо-элементу :before до изменения фона и удалили его эффект перехода, из-за чего цвет не будет меняться плавно, но это едва заметно. Теперь анимировано только положение белого переключателя псевдо-элемента :after.

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

input.switch:focus ~ label
{
  color: #000;
}
input.switch:focus ~ label:before
{
  box-shadow: 0 0 0 3px #999;
}

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

Эти эффекты работают в браузерах Firefox, Internet Explorer и Opera, а также современных версиях Chrome, но не работают в некоторых старых версиях, например 26.

Другие проблемы движка Webkit 

Последняя проблема: переключатель не работает в мобильных браузерах на старых версиях движка Webkit, таких как Safari на iPad 1.0 и старые версии браузеров на устройствах Android, а также в старых версиях Safari. Движок поддерживает подписи, селекторы :checkbox и показывает начальное состояние, но не работает с псевдо-элементами после первой загрузки страницы. Мы даже попробовали добавить немного JavaScript, но ничего не изменилось.

Только недавно в движок Webkit была добавлена анимация псевдо-элементов. Это неприятно, и в отличие от старых версий браузера Internet Explorer, таких как 6 и 7, сложно найти обходной путь, который бы не сказался на других браузерах.

Полагая, что пользователи браузеров на старых версиях движка Webkit не являются частью Вашей аудитории, вы можете использовать код HTML и CSS, как пожелаете. В противном случае Вам понадобится изменить структуру, добавив элементы вместо псевдо-элементов или код JavaScript, чтобы все работало.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Стилизация полосы прокрутки HTML5 для разных браузеров
• Интересная скользящая форма с использованием jQuery
• Создание анимированной гистограммы с использованием CSS3

html — Стилизация переключателя при выборе не работает

Задавать вопрос

спросил 1 год, 1 месяц назад

Изменено 1 год, 1 месяц назад

Просмотрено 192 раза

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

Есть ли другой способ написать следующее для работы со сторонним HTML?

 .radio input[type="radio"]:checked + label {
цвет фона: #bfb;
}
 

ПРИМЕЧАНИЕ. «

Сторонние радиокнопки HTML, которые я пытаюсь стилизовать

 '
' +
'$25,00' +
''
'<дел >' +
'$50.00' +
'' +
'<дел >' +
'$100. 00' +
'' +
'<дел >' +
'
 
 $500,00' +
'' +
'<дел >' +
'$1000,00' +
'' +
'<дел >' +
'Другое' +
'' +
'<дел >' +
'' +
'' +
'' +
'' +
 

CSS

 <стиль>
.радио {
  поле: 10 пикселей;
  акцент-цвет: синий;}
.радио вход[тип="радио"] {
  непрозрачность: 0;
  положение: фиксированное;
  ширина: 100%;}
лейбл .radio {
  цвет фона: #dddddd;
  отступ: 10px 10px;
  семейство шрифтов: без засечек, Arial;
  размер шрифта: 16px;
  граница: 0px сплошная #444;
  радиус границы: 4px;
  ширина: 90%;
  выравнивание текста: по центру;}
.
  радио метка:наведите {
  цвет фона: #8eeefc;
  цвет: #ffffff;}
.radio input[name="donation-level"]:focus + label {
  граница: 2px пунктир #444;}
.radio input[name="donation-level"]:checked + label {
  цвет фона: #bfb;}
input[type='text'] {размер шрифта: 14px; }
input[type='date'] {размер шрифта: 14px; }
input[type='email'] {размер шрифта: 14px; }
input[type='tel'] {размер шрифта: 14px; }
input[type='number'] {размер шрифта: 14px; }
input[type='zip-code'] {размер шрифта: 14px; }
textarea[type='street-address'] {размер шрифта: 14px; }
textarea[type='comment'] {размер шрифта: 14px; }
select[type='state'] {размер шрифта: 14px; }
выберите [тип = 'страна'] { размер шрифта: 14 пикселей; }
выберите [тип = 'провинция'] { размер шрифта: 14 пикселей; }
выберите [тип = 'частота'] { размер шрифта: 14 пикселей; }

 

URL-адрес новой страницы пожертвований: https://www.ip3action.org/donate-2

• html
• css

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

 

  
  25 долларов США

 

Я думаю, это связано с тем, что селектор CSS (селектор соседних элементов), который вы пытаетесь использовать, ищет следующую метку после отмеченного вами переключателя в вашем div. Однако после переключателя нет метки (в HTML метка начинается перед переключателем), поэтому CSS не применяется.

+ Знак: Смежный родственный комбинатор. Он объединяет две последовательности простых селекторов, имеющих одного и того же родителя, и второй должен стоять НЕМЕДЛЕННО

 // Это не будет работать, потому что он запрашивает родственный элемент label, который идет сразу после
// тип ввода радио,
. radio input[type="radio"]:checked + label {
цвет фона: #bfb;
}
// и элемент ввода в вашей структуре HTML является дочерним элементом элемента метки здесь
'<дел >' +
'$25,00' +
''
 

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

 //HTML
<дел >
 
25 долларов США