Оформление radio css: CSS стилизация checkbox и radio — 2 варианта — Вебджем.рф

Содержание

Формы в Bootstrap. Часть 2. Оформление для Select, Checkbox и Radio кнопок в Bootstrap « Марк и Марта.Ру. Записки отца-программиста

Марк и Марта.Ру. Записки отца-программиста Разработка HTML, CSS, JS Формы в Bootstrap. Часть 2. Оформление для Select, Checkbox и Radio кнопок в Bootstrap

Элементы управления Checkbox и Radio используются соответственно для множественного или одиночного выбора.

Пример checkbox-кнопок

                <h3>Вертикальные чекбоксы</h3>
                <form role="form">
                    <div>
                        <label>
                            <input type="checkbox" name="cb1" />Обычный чекбокс 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" name="cb2" />Обычный чекбокс 2
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="checkbox" name="cb3" disabled />Заблокированный чекбокс 3
                        </label>
                    </div>
                </form>

Пример radio-кнопок

               <h3>Вертикальные радиокнопки</h3>
                <form role="form">
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio1" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio2" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="rb" value="radio3" disabled />Радиокнопка заблокированная 3
                        </label>
                    </div>
                </form>

Чтобы заблокировать кнопку Checkbox или Radio, нужно добавить класс . disabled в контейнер с кнопкой, а также добавить атрибут disabled для кнопки.

Рис.4. Кнопки Radio и Checkbox вертикально

Радиокнопки и чекбоксы в строку

        <div>
            <div>
                <h2>Радиокнопки в строку</h2>
                <form role="form">
                    <label>
                        <input type="radio" name="rb" value="rb1" /> Значение 1
                    </label>
                    <label>
                        <input type="radio" name="rb" value="rb2" /> Значение 2
                    </label>
                    <label>
                        <input type="radio" name="rb" value="rb3" disabled /> Значение 3
                    </label>
                </form>
            </div>
            <div>
                <h2>Чекбоксы в строку</h2>
                <form role="form">
                    <label >
                        <input type="checkbox" name="cb1" value="cb1" /> Значение 1
                    </label>
                    <label>
                        <input type="checkbox" name="cb2" value="cb2" /> Значение 2
                    </label>
                    <label>
                        <input type="checkbox" name="cb3" value="cb3" disabled /> Значение 3
                    </label>
                </form>
            </div>

Рис. 5. Кнопки Radio и Checkbox в строку

Использование тэга Select в Bootstrap

Тэг <select> оказался наименее описанным в Bootstrap. Единственное, что нужно указать при использовании <select> — это класс .form-control.

        <select >
           <option value="1">Значение 1</option>
           <option value="2">Значение 2</option>
           <option value="3">Значение 3</option>
           <option value="4">Значение 4</option>
           <option value="5">Значение 5</option>
        </select>

Чтобы у <select> была возможность выбора нескольких значений, нужно добавить атрибут multiple:

         <select multiple>
             <option value="1">Значение 1</option>
             <option value="2">Значение 2</option>
             <option value="3">Значение 3</option>
             <option value="4">Значение 4</option>
             <option value="5">Значение 5</option>
         </select>

Нередактируемые поля в Bootstrap

Вместо полей формы для отображения и передачи данных можно использовать текстовый элемент <p>. Для этого ему нужно указать класс .form-control-static.

                <h2>Демо-вход</h2>
                <form role="form">
                    <div>
                        <label for="login">Логин</label>
                        <div>
                            <p>demologin</p>
                        </div>
                    </div>
                    <div>
                        <label for="pass">Пароль</label>
                        <div>
                            <input type="password" placeholder="Пароль">
                        </div>
                    </div>
                    <div>
                        <div>
                            <button type="submit">Войти</button>
                        </div>
                    </div>
                </form>

Рис.

6. Использование текстовых полей для данных формы

html — Как стилизовать родительський элемент в CSS?

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

Вопрос задан 1 год 4 месяца назад

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

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

У меня есть такая структура радио кнопок:

<label>
  <input type="radio" />
 <span>
  <em>
   TEXT
  </em>
 </span>
</label>

И такие стили:

radio-btn{
    padding: 3px 20px 3px 20px;
    color: $gray60;
    
    input:checked {
      background-color: $gray10;
      color: red;
      font-weight: 500;
    }
    &:hover {
      background-color: $gray10;
      color: $purple80;
    }
  }

У меня не получается сделать стили для label когда инпут в статусе checked. Как это можно сделать?

UPD: Менять структуру нельзя, т.к кнопок в проекте тысячи и это сломает очень много всего. JS также использовать не рекомендовано

html
css

При желании, любое необходимое визуальное оформление здесь можно сделать по селектору input:checked + span

label {
  position: relative;
}
label>span {
  position: absolute;
  background-color: #eee;
  width: max-content;
  padding: 0.3em 0.5em 0.3em 1.5em;
}
label:hover>span {
  color: blue;
}
input {
  position: absolute;
  z-index: 1;
  margin: 0.5em;
}
input:checked+span {
  background-color: #ccc;
}

<label>
  <input type="checkbox" />
 <span>
  <em>
   TEXT
  </em>
 </span>
</label>

в label помещаете input и span. input скрываете, а для span пишете стили. при input:cheked, меняете их. и span будет работать как input. label естесственно не стилизуете

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Best 30+ Radio Button CSS style Examples

Похожие статьи

1. 50+ CSS КНОПОК

2. 10+ CSS 3D КНОПКА 5 2. 10+ CSS 3D КНОПКИ См. перо Пользовательская радиокнопка CSS3 — Radiosplosion by sodapop (@sodapop) на КодПене.
Название: — Custom Radio Button CSS Radiosplosion

Автор: -sodapop
Сделано с: -HTML, CSS, JS
См. перо Селектор треугольников управления проектами с React + CSS Grid 😅 от Jhey (@jh4y) на КодПене.
Название:- Селектор треугольника управления проектами с сеткой React + CSS ??

Автор:-Jhey
Сделано с:-HTML,CSS,JS
См. перо Радиокнопка Nerf Gun от Olivia Ng (@oliviale) на КодПене.
Название:- Nerf Gun Radio Button

Автор:-Olivia Ng
Сделано с:-HTML,CSS,JS
См. перо Пользовательский интерфейс // Радиокнопка от Cosimo Scarpa (@coswise) на КодПене.
Название:- UI // Radio Button

Автор:-Cosimo Scarpa
Сделано с помощью:-HTML,CSS,JS
См. перо Список радиокнопок от Vineeth.TR (@vineethtrv) на КодПене.
Заголовок: — Список радиокнопок

Автор: -Vineeth.TR
Сделано с: -HTML, CSS, JS
См. перо Выбор цвета для радио от The Bearded Wonder (@wildbeard) на КодПене.
Заголовок: — Radio Color Picker

Автор: — The Bearded Wonder
Сделано с помощью: -HTML, CSS, JS
..»> См. перо Закуски? Плоские входы радиокнопок… от Kris Hedstrom (@kristofferh) на КодПене.
Заголовок:- Закуски? Плоские входы радиокнопок…

Автор:-Крис Хедстром
Сделано с:-HTML,CSS,JS
См. перо Radio Button Dot-Slider (Pure CSS) от Brandon McConnell (@brandonmcconnell) на КодПене.
Заголовок: — Кнопка Radio Button Dot-Slider (Pure CSS)

Автор: — Brandon McConnell
Сделано с помощью: — HTML, CSS, JS
См. перо Радиокнопка Эрика Хугенина (@Sirop) на КодПене.
Название:- Радиокнопка

Автор:-Эрик Хугенин
Сделано с:-HTML,CSS,JS
См. перо Стиль радиокнопок от Мортена Олсена (@morten-olsen) на КодПене.
Название: — Стиль переключателя

Автор: — Мортен Олсен
Сделано с: — HTML, CSS, JS
См. перо Взаимодействие радиокнопок ✨ от Dronca Raul (@rauldronca) на КодПене.
Название:- Взаимодействие радиокнопок?

Автор:-Dronca Raul
Сделано с помощью:-HTML,CSS,JS
См. перо Анимация радиокнопки от Antoinette Janus (@internette) на КодПене.
Название: — Radio Button Animatio

Автор: — Antoinette Janus
Сделано с: -HTML, CSS, JS
См. перо Дизайн материалов — радиокнопка CSS [SCSS] от Lorenzo D’Ianni (@lorenzodianni) на КодПене.
Заголовок: — Material Design — Radio Button CSS [SCSS]

Автор: -Lorenzo D’Ianni
Сделано с помощью: -HTML,CSS,JS
См. перо Сортируемая сетка с использованием GreenSock Draggable by Blake Bowen (@osublake) на КодПене.
Заголовок: Сортируемая сетка с использованием GreenSock Draggable

Автор:-Блейк Боуэн
Сделано с:-HTML,CSS,JS
См. перо Радиокнопка Stop Go от Криса Гэннона (@chrisgannon) на КодПене.
Название: — Stop Go Radio Button

Автор: — Крис Гэннон
Сделано с: — HTML, CSS, JS
См. перо Gooey Switch – Радиокнопка от Gowri Prasanth V M (@gowriprasanthvm) на КодПене.
Название: — Gooey Switch — Radio Button

Автор: -Gowri Prasanth V M
Сделано с помощью: -HTML, CSS, JS
См. перо Переключатель с тремя состояниями от Давиде Сандона (@Davide_sd) на КодПене.
Название: — Переключатель с тремя состояниями

Автор: — Дэвид Сандона
Сделано с: — HTML, CSS, JS
См. перо Шкала ввода радиокнопок от Калеба Дюрена (@calebduren) на КодПене.
Название: Шкала ввода радиокнопок

Автор: Калеб Дюрен
Сделано с помощью: HTML, CSS, JS
См. перо Радиокнопки в стиле таблеток | Полностью масштабируемый Håvard Brynjulfsen (@havardob) на КодПене.
Название:- Радиокнопки в стиле таблеток | Полностью масштабируемый

Автор:-Håvard Brynjulfsen
Сделано с:-HTML,CSS,JS
См. перо Radio Button Big Square [Just CSS] от Габриэля Феррейры (@gabrielferreira) на КодПене.
Название: — Radio Button Big Square [Just CSS]

Автор: -Gabriel FerreiraUnfollow
Сделано с помощью: -HTML,CSS,JS
См. перо Анимация радиокнопки — только CSS от Milan Raring (@milanraring) на КодПене.
Название:- Анимация переключателя – Только CSS

Автор:-Milan Raring
Сделано с:-HTML,CSS,JS
См. перо Чистый вариант CSS (радио и флажок) Нет JS от Арона (@Aoyue) на КодПене.
Название: — Параметр Pure CSS (радио и флажок) Нет JS

Автор: — Арон
Сделано с: — HTML, CSS, JS
См. перо Радиокнопка Material Design CSS только от Hannes Kamecke (@hansmaad) на КодПене.
Заголовок: — Радиокнопка Material Design Только CSS

Автор: -Hannes Kamecke
Сделано с помощью: -HTML,CSS,JS
См. перо Input & Radio-button от Ophelia Fournier-Laflamme (@opheliafl) на КодПене.
Название:- Ввод и радиокнопка

Автор:-Офелия Фурнье-Лафламм
Сделано с помощью:-HTML,CSS,JS
См. перо Jelly Radio Button от Томмазо Полетти (@tomma5o) на КодПене.
Название:- Jelly Radio Button

Автор:-Tommaso Poletti
Сделано с помощью:-HTML,CSS,JS
См. перо Материал Radio Button от CODEARMADA (@montechristos) на КодПене.
Заголовок: — Материал радиокнопки

Автор: -CODEARMADA
Сделано с помощью: -HTML,CSS,JS
См. перо Swappy Radio от Лиама (@liamj) на КодПене.
Название: — Swappy Radios

Автор: — Liam
Сделано с: — HTML, CSS, JS
См. перо Полностью CSS: настраиваемые флажки, переключатели и поля выбора от Кенана Юсуфа (@KenanYusuf) на КодПене.
Название: — Полностью CSS: пользовательские флажки, переключатели и поля выбора

Автор: — Кенан Юсуф
Сделано с: — HTML, CSS, JS
См. перо Радиокнопка Андреаса Шторма (@avstorm) на КодПене.
Название: — Radio Button

Автор: -Andreas Storm
Сделано с помощью: -HTML, CSS, JS
См. перо Демонстрация свойств Flexbox от Dimitar (@justd) на КодПене.
Название: — Демонстрация свойств Flexbox

Автор: — Dimitar
Сделано с: — HTML, CSS, JS
См. перо Радиокнопки CSS от Анжелы Веласкес (@AngelaVelasquez) на КодПене.
Заголовок: — Переключатели CSS

Автор: — Анджела Веласкес
Сделано с: -HTML, CSS, JS
Имя *
Электронная почта *
Веб-сайт / URL-адрес
Сообщение
Телефон
В последний раз: пользовательские стили переключателей и флажков опубликованы
0 три года назад коллекция доступных элементов управления формами, которые включают определенные шаблоны разметки для создания переключателей и флажков с пользовательскими стилями. Эти шаблоны стали кульминацией многих лет моей работы, изучения реализаций других людей, а затем их стресс-тестирования с помощью вспомогательных технологий, которые были в моем распоряжении.
В то время самым надежным способом стилизации этих элементов управления формы без их повторного создания с нуля с помощью ARIA было визуальное скрытие переключателя или флажка, а затем воссоздание элементов управления с помощью или и их псевдоэлементы ( ::before и ::after ). Потребность в этом подходе была в значительной степени, но не полностью, из-за того, что Internet Explorer и Legacy Edge не обеспечивали наилучшей поддержки прямого стиля собственного HTML 9.0249 самих элементов. И если вы отправитесь еще дальше в прошлое, все браузеры имели барьеры в прямом стиле этих элементов управления.
Это не значит, что в 2018 году нельзя было напрямую стилизовать собственные радиокнопки и флажки (см. рестайлинговые радиокнопки и флажки с рестайлингом). Но в то время требовались обходные пути и ограничения стиля, которые все еще существовали из-за несоответствий с Firefox, Internet Explorer и версиями до Chromium Edge.
Сейчас (2021 г.), с отказом от поддержки Internet Explorer слева и справа, Edge теперь основан на Chromium, а причуды Firefox были устранены, эти ограничения в значительной степени сняты.
Надеюсь, это последний раз, когда я пишу на эту тему.
Что нужно для прямого рестайлинга радио и флажков?
Поскольку мы собираемся стилизовать элементы напрямую, ожидаемые шаблоны разметки будут такими же, как если бы вы не применяли пользовательский стиль. Например:
Вариант рестайлинга 1 Изменить вариант 2
<метка для = "c1"> <тип ввода="флажок"> Выбор 1 <тип ввода="флажок"> Вариант 2
Необходимый CSS
Существует множество свойств CSS, которые радиокнопки и флажки будут учитывать по умолчанию, но чтобы начать абсолютно заново (что, если вы изменяете стиль этих элементов управления, это, вероятно, то, что вам нужно в любом случае), первое, что нужно сделать. нам нужно очистить их от всех стилей по умолчанию. Для этого используем внешний вид: нет свойство.
Примечание: для этих конкретных компонентов, я не сталкивался с какими-либо непредвиденными проблемами при использовании свойства внешнего вида без префикса . Но, согласно caniuse.com, для Webkit по-прежнему требуется префикс -webkit-. Как правило, лучше перестраховаться, чем потом сожалеть, поэтому, хотя это раздражает, по-прежнему нужны префикс -webkit-appearance и внешний вид , лучше оставить его на данный момент.
Один раз 9Внешний вид 0249: для радиокнопок и флажков, которые вы собираетесь изменить, не указан , вы будете иметь полный контроль над стилем самого элемента и его псевдоэлементов ::before и ::after . Но теперь, когда вы взялись за эту задачу, у вас есть следующее, что вам нужно учитывать в вашем CSS:
По умолчанию (непроверенное состояние).
Новое проверенное состояние.
Необязательное неопределенное/«смешанное» состояние (не всегда необходимо, но при необходимости вы захотите его иметь)
Пользовательское состояние фокуса.
Стиль фокуса проверенного состояния (если предыдущий стиль фокуса не заметен на фоне нового отмеченного стиля — например, темный контур на фоне новой темной заливки, когда элемент управления отмечен).
Отключенное состояние (убедитесь, что текст метки продолжает соответствовать необходимым минимумам контрастности!).
Убедитесь, что ваши стили не повлияли на направление слева направо и справа налево ( dir=ltr , dir=rtl ).
Убедитесь, что ваши стили работают с медиа-запросами, такими как
принудительные цвета: активно (ранее -ms-high-contrast: активно )
предпочитаемая цветовая схема: темный
предпочитает уменьшенное движение (если вы делаете какие-то сумасшедшие анимации или что-то в этом роде)
печать
на самом деле любой другой медиа-запрос, где ваш собственный стиль может не сработать. Мы все равно должны тестировать этот материал, верно?
Вы можете поиграть со следующим переключателем и флажком CodePen. Попробуйте добавить dir=rtl на содержащий элементов
или установите один из элементов управления на disabled .
См. перо Собственная радиокнопка в пользовательском стиле от Скотта (@scottohara) на КодПене.
Помимо необходимого CSS и разметки
Может быть, вы думаете, что вам нужно больше, чем то, что здесь указано. Три селектора для стиля переключателя или флажка? «Пш», — восклицаете вы. «У меня есть серьезное пользовательское удовольствие, которое нужно внедрить в эти приземленные элементы управления для выполнения основных задач в Интернете». Прохладно! Не стесняйтесь добавлять другие общие/презентационные элементы по своему усмотрению.
Например:

<тип ввода="флажок"> <метка для="с"> Выбор

В приведенной выше разметке флажок заключен в содержащий элемент
, а для дополнительных стилей добавлены два дополнительных элемента с глупыми именами классов. Например, хотите создать эффект анимации при наведении, фокусировке или активации флажка? Теперь вы можете использовать родственные селекторы CSS (например, ~ или + ) и/или немного JavaScript, чтобы включить свой Material Design. Просто не забудьте быть осторожным с z-индексацией, чтобы эти дополнительные элементов случайно не блокируют событие указателя (например, щелчок, касание) от достижения элемента управления формы.
Просто, что бы вы ни делали, не надо делать глупостей вроде этой:

<тип ввода=флажок табиндекс=-1 ария-скрытый = правда class=визуально-скрытый > <дел> Название элемента управления

Вложение интерактивных элементов, подобных приведенным выше, абсолютно не нужно, и в зависимости от используемой вспомогательной технологии «скрытый» флажок все еще может быть обнаружен (например, построчная навигация с помощью VoiceOver в macOS или использование Dragon Naturally Speaking — как показало недавнее тестирование).
Если вы застряли в ситуации, когда вы имеете дело с указанным выше недопустимым вложением флажка в «флажок», вы, вероятно, используете CSS visibility: hidden , чтобы полностью скрыть вложенный собственный флажок от вспомогательных технологий, сохраняя при этом текущую функциональность. Рефакторинг был бы идеальным здесь, поскольку CSS, который мы поставляем, является сильным предложением, но не требованием для пользователей. Но погодите, иногда вам просто нужно скрыть свою ошибку и надеяться, что никто не заглянет вам под ковер и не заметит груды грязи и пыли. Правильно?
Подведение итогов и благодарность
На данный момент я вижу очень мало причин продолжать рекомендовать визуально-скрытый метод для оформления переключателей и флажков. Поскольку все современные браузеры могут обрабатывать стили этих элементов управления, визуально скрытая техника имеет слишком много дополнительных ошибок, хотя и управляемых, чтобы их знать и учитывать.
Кроме того, я также довольно скептически отношусь к «необходимости» создания пользовательских переключателей и флажков ARIA. Уровень усилий по созданию этих настраиваемых элементов управления и обеспечению наличия всех необходимых функций выходит далеко за рамки простого обновления CSS. Даже если вам нужно создать ARIA role=switch , стили CSS и использование неявной функциональности с проверенным дадут вам все, что вам нужно, чтобы стилизовать собственный флажок в пользовательском переключатель (третий пример на этой связанной странице).