Css стилизация radio: CSS стилизация checkbox и radio — 2 варианта — Программирование на Python и Objective-C в Mac OS

Содержание

Стилизация переключателей (радио-кнопок) в CSS

Радио-кнопки подразумевают, что вы выбираете один элемент из некоторого количества, поэтому элемент <input type="radio"> получил название переключателя в отличие от флажков, которые подразумевают множественный выбор. Браузеры довольно неплохо отображают радиокнопки по умолчанию.

Выбор 1
Выбор 2
Выбор 2

Однако, вам может понадобится как-то стилизовать эти элементы для своего сайта.

Как правило, стилизация радио-кнопок основана на использовании такого элемента, как label, клик на котором приводит к выбору определенного переключателя, с которым <label> связан с помощью атрибута for, в котором указывается id переключателя. Второй вариант — это когда в разметке радио-переключатель находится внутри элемента label.

Простой пример

See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.18892

Радио-кнопки, похожие на флажки

Если вы хотите стилизовать переключатели в виде флажков — пример от Andrew Vereshchak — как раз то, что нужно.

See the Pen Toggle radio intput with the label by Andrew Vereshchak (@multum) on CodePen.18892

Переключатели с изменением цвета и иконки

Здесь автор Andrew использовал абсолютное позиционирование для отдельного блока с классом .switch, в который входят 2 <label> и <span>. Также здесь не обошлось без псевдоэлемента ::after и псевдокласса :checked.

See the Pen Awesome Toggle Button by Andrew (@theawesomecoder61) on CodePen.18892

Разноцветные радио-кнопки

В этом примере от Dronca Raul каждый переключатель имеет свой цвет и галочку внутри при щелчке на элементе.

See the Pen Custom Radio Buttons by Dronca Raul (@rauldronca) on CodePen.18892

Используем переключатели для выбора цвета

В этом примере тема цветов для переключателей продолжается. Здесь мы не только прячем элемент <input type="radio"> с помощью CSS, но и изменяем фоновый цвет элемента с id="output" на тот, который указан в качестве value для <input> и фона для span-элемента, вло женного в <label>.

See the Pen Radio Color Picker by Elen (@ambassador) on CodePen.18892

Переключатели Да-Нет-Возможно

Еще одно цветовое решение от Matthew Blode.

See the Pen Flat Radio — Yes/No by Matthew Blode (@mblode) on CodePen.18892

Переключатель макета

Этот пример от Naoya очень удобен для демонстрации макетов с разной шириной. Интересно, что радио-кнопки, а точнее заменяющие их элементы label выглядят как … ссылки с подчеркиванием выбранного (псевдокласс :checked) в данный момент элемента.

See the Pen CSS Switch Layout by Naoya (@nxworld) on CodePen.18892

Выбор блюд

В этом примере от Kris Hedstrom радио-кнопки в какой-то степени похожи на чекбоксы (флажки) — они отмечают ваш выбор в виде галочки.

See the Pen Snacks? Flat radio button inputs… by Kris Hedstrom (@kristofferh) on CodePen.18892

Использование радио-кнопок для выставления рейтинга в виде звездочек

Автор Stas Melnikov

See the Pen Pure CSS Rating via CSS Custom Properties as API by Stas Melnikov (@melnik909) on CodePen.18892

Анимация при переключении выбора

Несколько примеров, в которых использована анимация при переключении между радио-кнопками.

Автор: Tommaso Poletti

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.18892

Простые переключения с эффектом вдавливания от Pamela Dayne

See the Pen Just very simple radio buttons by Pamela Dayne (@pamdayne) on CodePen.18892

Переключение с перепрыгиванием от Jon Kantner

See the Pen Radio Hopping by Jon Kantner (@jkantner)
on CodePen.0

Автор Liam использовал для анимации JS-код.

See the Pen Bulgy radios by Liam (@liamj) on CodePen.18892

Интересное решение с радио-кнопками на темном фоне от Andrej Sharapov

See the Pen Animated SVG radio buttons by Andrej Sharapov (@andrejsharapov) on CodePen.18892

Анимация и стили как для радио-кнопок, так и для флажков от WILDER TAYPE.

See the Pen Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wilder_taype) on CodePen.18892

Использование маски

See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen.18892

«Текущая» кнопка

See the Pen Liquid Radio Button by Tamino Martinius (@Zaku) on CodePen.18892

Замечательное решение для переключения кнопок меню

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.18892

Последовательное и быстрое заполнение кнопки

See the Pen Input Radio by Andreas Storm (@avstorm) on CodePen.18892

Выбираем кредитную карту вместе с Dean

See the Pen Recreation: Card theme switcher by Dean (@visualcookie) on CodePen.18892

Перепрыгивающий шарик от Jon Kantner

Вариант 1

See the Pen Radio Buttons With Marble and Wood by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Rolling Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 3 от web-tiki

See the Pen CSS only input radio select concept by web-tiki (@web-tiki) on CodePen.18892

Переключатели в виде блоков с иконками

Автор Gabriel Ferreira предлагает использовать переключатели в виде блоков с анимированными иконками. Это можно сделать не только для Front-End/Back-End, но и для любых других текстов.

See the Pen Radio Button Big Square [Just CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.18892

Переключатель мужчина-женщина

See the Pen Radio button styling by Morten Olsen (@morten-olsen) on CodePen.18892

Соединительные линии, ведущие к радио-кнопкам

See the Pen Radio Button Circuit by LukasOe (@lukasoe) on CodePen.18892

Переключатели с отметкой в верхнем углу блока

При клике на блоке выбор отмечается сменой цвета и галочкой в круге от Rosa.

See the Pen Checkout Form by Rosa (@RRoberts) on CodePen.18892

Радио-кнопки как переключатели для радио от Jon Kantner

Вариант 1

See the Pen Literal Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Literal Radio Buttons (Neumorphic Version) by Jon Kantner (@jkantner) on CodePen.18892

Радио-кнопки для вкладок (табов)

Ronny Siikaluoma предлагает вам использовать радио-кнопки для формирования отзывчивых (адаптивных) вкладок. Заметьте, без всякого JavaScript.

See the Pen Responsive Tabs with Pure CSS by Ronny Siikaluoma (@siiron) on CodePen.18892

Еще один вариант вкладок от Tristan White

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.18892

Выбор билетов с ценой и временем от Dannie Vinther

See the Pen Choose Ticket [a11y] by Dannie Vinther (@dannievinther) on CodePen.18892

Социальные кнопки

В этом примере от Aron использованы не только радио-кнопки, но и флажки (чекбоксы). При клике на элемент вы увидите pop-up окно с названием выбранной компании или соцсети.

See the Pen Pure CSS Option ( radio & checkbox ) No JS by Aron (@Aoyue) on CodePen.18892

Переключение иконок Google maps

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.18892

Переключение цветовых блоков

В этом примере от Ivan Grozdic элементы label выглядят и работают как ссылки, но без JavaScript, сортируя цветовые блоки.

See the Pen Content filter v2 — pure css — #09 by Ivan Grozdic (@ig_design) on CodePen.18892

Библиотека для стилизации чекбоксов на чистом css

Представляем на ваш суд отличную легкую библиотеку, созданную lokesh-coder и предназначенную для стилизации и кастомизации чекбоксов на чистом css.

Вот отличный пример, демонстрирующий возможности данной библиотеки:

Преимущества кастомизации чекбоксов и радиокнопок с помощью данной библиотеки:

Базовые
- Фигуры — Квадрат, скругленная, круг
- Варианты — Стандартный, заполненный, с тонкой обводкой
- Цвета — primary, success, info, warning и danger
- Варианты заполнения — заливка или обводка
- Анимации — плавная, tada, jelly, pulse, с поворотом

Переключатель в стиле iOS

Адаптивность

Отсутствие javascript

Кастомный иконочный шрифт

Поддержка изображений

SVG иконки

Возможность переключения между иконками\svg\изображениями

«Блокировка» для input type=»checkbox»

Поведения — focus, hover, indeterminate

Поддержка фреймворков таких как Bootstrap, Foundation, Semantic UI, Bulma …

Кастомизация с помощью SCSS

Поддержка всех современных браузеров, в том числе мобильных устройств

Стили для печати

Установка

Установка через npm или yarn

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

После этого добавить pretty-checkbox.min.css в html

Подключение без скачивания через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>

Ручная загрузка

Загрузка исходного кода с GitHub

SCSS

Также можете подключить pretty-checkbox.scss в ваш главный scss файл

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Использование

Pretty Checkbox имеет множество встроенных стилей:

Название класса	Описание
p-default	Базовый стиль
p-switch	Переключатель в стиле iOS
p-icon	Для вставки иконочного шрифта
p-svg	Для вставки svg файла или разметки
p-image	Для вставки изображения

И три возможных формы: p-round, p-curve, p-square (по умолчанию)

Пример кастомизированного чекбокса на codepen

See the Pen default pretty-checkbox by Alexey (@leshkacho) on CodePen.

Базовый чекбокс имеет три варианта начертания p-fill p-thick p-outline (по умолчанию)

Эти стили можно комбинировать:

See the Pen basic styles and combines pretty-checboxes by Alexey (@leshkacho) on CodePen.

Рассмотрим checkbox в виде переключателя в стиле iOS

See the Pen KZwoyq by Alexey (@leshkacho) on CodePen.

Вставка иконок, svg, и картинок

<!--Иконочный шрифт-->
	  <div>
		<input type="checkbox">
		<div>
		  <i></i>
		  <label>Check me</label>
		</div>
	  </div>
<!--svg-->
	  <div>
		<input type="checkbox">
		<div>
		  <img src="file.svg" />
		  <label>Check me</label>
		</div>
	  </div> <!--Так же поддерживается вставка svg с помощью тегов в тело документа-->
<!--Картинка-->
  <div>
    <input type="checkbox" />
    <div>
      <img src="/check.png" />
      <label>Block</label>
    </div>
  </div>

Цветовая схема

Существует 5 основных цветов для отображения чекбокса: p-primary p-success p-warning p-info p-danger

А так же 5 цветов для линии обводки

p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Подробное представление:

See the Pen YYPaOK by Alexey (@leshkacho) on CodePen.

Анимации

See the Pen pretty-checkboxes animation by Alexey (@leshkacho) on CodePen.

Добавление анимация на чекбокс происходит путем добавления описанных в примере классов

Другие возможности

Переключатели

Возможно создание переключателей с заменой текста, иконки только на css!

Происходит это следующим образом

See the Pen toggle pretty-checkboxes by Alexey (@leshkacho) on CodePen.

Можно использовать разные иконки для обоих состояний переключателя

Кастомизация радио-кнопок на чистом css без js

радио кнопки добавляются идентично чекбоксам и с ними работают такие же классы

GitHub проекта Полная документация Скачать архивом с GitHub

Стилизация input type radio на чистом css3

Сегодня создадим стилизацию для поля формы input type radio. Наверное многие знают, что создать стили для радио кнопок не так просто. Так вот сегодня мы с вами создадим красивые радио кнопки при помощи css3 и никаких скриптов и тому подобных громоздких примудростей. В интернете конечно можно найти много интересных методов стилизации радио-кнопок, но они очень громоздкие и не всем понятные. Но я вам помогу решить — эту задачу быстро и без никаких javascript и jquery

Даже в самом CSS3 нет возможности на прямую редактировать стили для поля формы input type radio.

Но для создания стиля для поля radio можно обойти все возможные простые подходы.

Для примера давайте рассмотрим простой тип поля переключателя

Код HTML

<form action="" method="get">
<input name="Кнопка 1" type="radio" value="" checked>
Кнопка 1
 
<input name="Кнопка 2" type="radio" value="">
Кнопка 2
 
<input name="Кнопка 3" type="radio" value="">
Кнопка 3
 
<input name="Кнопка 4" type="radio" value="">
Кнопка 4
 
</form>

Здесь мы можем просмотреть простую реализацию формы. А сейчас приступим к реализации вот такой вот стильной радио кнопки.

Пример как это работает

А сейчас просмотри как же стилизовать радио кнопки, input type radio?

HTML код

<ul>
    <li>
            <input type="radio" name="g">
            <label for="choice-a">
                <span><span></span></span>
                Choice A
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-b">
                <span><span></span></span>
                Choice B
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-c">
                <span><span></span></span>
                Choice C
            </label>
    </li>
    <li>
            <input type="radio" name="g">
            <label for="choice-d">
                <span><span></span></span>
                Choice D
            </label>
    </li>
</ul>

И вот собственно сам css для стилизации

CSS код

ul.radio-group li {
    position: relative;
    list-style: none;
    padding: 10px;
}
 
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
 
/* Соответствует прямому потомку лейбла, которому предшествует a
   радио-кнопка */
input[type="radio"] + label > span {
  position: relative;
  border-radius: 12px;
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: 1px solid #bcbcbc;
  margin: 0 1em 0 0;
  display: inline-block;
  vertical-align: middle;
}
 
 
 
/* Соответствует промежутку, содержавшему прямым потомком
   из лейбла, которому предшествует проверенная радио-кнопка */
input[type="radio"]:checked + label > span span {
   display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 4px;
    border: none;
    background: #e00e17;
}

Еще один пример

Очень красивые получились радио-кнопки и просто не привычные конечно. Но надеюсь вам понравилось. Чтож пример надеюсь вам понравился приступаем к просмотру кода который необходимо вставить на страницы сайта.

Код HTML

<div>
<form>
<input type="radio" name="radio" checked="">
<label for="radio1">Кнопка 1</label>
</form>
</div>
 
<div>
<form>
<input type="radio" name="radio">
<label for="radio2">Кнопка 2</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio">
<label for="radio3">Кнопка 3</label>
</form></div>
 
<div>
<form> 
<input type="radio" name="radio">
<label for="radio4">Кнопка 4</label>
</form>
</div>

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

Код CSS

form {
    margin: 40px 0;
}
 
div {
    clear: both;
    margin: 0 50px;
}
 
label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}
 
/* hide input */
input.radio:empty {
    margin-left: -999px;
}
 
/* style label */
input.radio:empty ~ label {
    position: relative;
    float: left;
    line-height: 2.5em;
    text-indent: 3.25em;
    margin-top: 2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
input.radio:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '';
    width: 2.5em;
    background: #D1D3D4;
    border-radius: 3px 0 0 3px;
}
 
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #C2C2C2;
}
 
input.radio:hover:not(:checked) ~ label {
    color: #888;
}
 
/* toggle on */
input.radio:checked ~ label:before {
    content:'\2714';
    text-indent: .9em;
    color: #9CE2AE;
    background-color: #4DCB6D;
}
 
input.radio:checked ~ label {
    color: #777;
}
 
/* radio focus */
input.radio:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

Вот и все пользуйтесь! Конечно для подгона под свои нужды сам css можно изменять подстраивать эксперементировать.

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

Делаем красивые кнопки выбора (стилизация radio input)

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

Не могу не отметить, что делать стандартные Radio-кнопки или, тем более, выпадающие списки для выбора из 2-4 вариантов не очень удобно и красиво. Поэтому я решил показать вам как можно сделать подобные кнопки выбора значительно удобнее.

Разметка

Нам понадобится всего несколько дополнительных элементов: при написании разметки формы, вам потребуется обернуть каждую пару input + label в блочный элемент, в моём случае это div с классом form-item и так же поступить с этими div’ами, у меня это контейнер с классом radio-container. Вы наверняка уже сталкивались ранее с подобным подходом, если использовали Boostrap Framework.

Я набросал макет для 2, 3 и 4 кнопок выбора (не рекомендую использовать данный подход для большего количества элементов, в таком случае лучше воспользоваться выпадающим списком):

<form>
<div>
<div>
<input type=»radio» name=»option1″ checked>
<label for=»radio1″>radio1</label>
</div>
<div>
<input type=»radio» name=»option1″>
<label for=»radio2″>radio2</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option2″ checked>
<label for=»radio3″>radio3</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio4″>radio4</label>
</div>
<div>
<input type=»radio» name=»option2″>
<label for=»radio5″>radio5</label>
</div>
</div>
</form>

<br>

<form>
<div>
<div>
<input type=»radio» name=»option3″ checked>
<label for=»radio6″>radio6</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio7″>radio7</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio8″>radio8</label>
</div>
<div>
<input type=»radio» name=»option3″>
<label for=»radio9″>radio9</label>
</div>
</div>
</form>

<form>

<div>

<label for=»radio1″>radio1</label>

</div>

<div>

<label for=»radio2″>radio2</label>

</div>

</form>

<br>

<form>

<div>

<label for=»radio3″>radio3</label>

</div>

<div>

<label for=»radio4″>radio4</label>

</div>

<div>

<label for=»radio5″>radio5</label>

</div>

</form>

<br>

<form>

<div>

<label for=»radio6″>radio6</label>

</div>

<div>

<label for=»radio7″>radio7</label>

</div>

<div>

<label for=»radio8″>radio8</label>

</div>

<div>

<label for=»radio9″>radio9</label>

</div>

</form>

Стили

Для начала нам необходимо будет скрыть сами элементы выбора, я сделал это просто, при помощи свойства display: none. Теперь пользователю отображаются только элементы label, если вы не допустили ошибок в разметке, то по нажатию на них, элементы выбора должны активироваться, вы можете проверить это при помощи инструментов разработчика в вашем браузере.

Далее выравниваем label по горизонтали, вы можете сделать это несколькими способами:

При помощи свойства float: left;, применённого к элементам label. Я не рекомендую данный подход, так как он в некоторых ситуациях, может сломать вёрстку, и, кроме того, вам придётся использовать хак в виде дополнительного элемента clearfix.
Использовать свойство display: inline-block;, для элементов label. Данный подход я использовал ранее, до того как практически во всех браузерах появилась поддержка flexbox.
Для родительского контейнера (в моём случае это radio-container) воспользоваться свойством display: flex;

Я использую третий вариант, flexbox поддерживаться практически во всех браузерах, если вы хотите поддерживать IE, этот подход вам не подойдёт.

Далее нам осталось лишь показать пользователю какой элемент активен на данный момент, сделать это очень просто, но есть один нюанс: ваш элемент input должен следовать перед элементом label, иначе css свойство, приведённое ниже, работать не будет.

Для того чтобы выделить активный элемент используем следующий приём:

.radio-container .radio-btn input:checked + label{
background-color: #0082fe;
color: #fff;
}

.radio-container .radio-btn input:checked + label{

background-color: #0082fe;

color: #fff;

}

Эта запись означает, что вложенные стили будут применяться только к элементу label и только в том случае, если элемент radio, к которому относится label, активен в данный момент.

Как видно из записи, активный элемент будет другого цвета и текст будет белым, в моём примере этого достаточно.

Результат

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

Можно немного изменить стили и получить такой результат:

Как видите, вы можете легко изменить внешний вид получившихся кнопок как вам угодно.

Данный приём очень хорошо работает когда у вас есть всего 2-4 варианта выбора, на пример гендерная принадлежность пользователя, выбор из вариантов «Да», «Нет», период оповещения (ежедневно, еженедельно, ежемесячно) и так далее. При больше количестве элементов советую воспользоваться выпадающим списком, это будет и удобнее для пользователя и красивее выглядеть на вашем сайте.

comments powered by HyperComments

: The Field Set element — HTML

HTML-элемент <fieldset> используется для группировки нескольких элементов управления без веб-форм.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Пример выше показывает, как элемент <fieldset> группирует части HTML-формы, а вложенный элемент <legend> даёт заголовок для <fieldset>. Он может иметь несколько атрибутов, самый используемый из них form, который содержит id формы <form> на этой же странице. Этот атрибут позволяет сделать <fieldset> частью формы <form> даже если он не находится внутри неё. Также вы можете отключить <fieldset> и всё его содержимое с помощью атрибута disabled.

Этот элемент включает в себя глобальные атрибуты (en-US).

disabled HTML5: Если этот логический атрибут установлен, все элементы управления формой, вложенные в <fieldset> будут отключены. Это значит, что их нельзя изменять, но можно отправить через форму <form>, в отличие от атрибута disabled на элементах управления формой. Они не будут реагировать на браузерные события, такие как клики мышью или события focus. По умолчанию, браузер отображает такие элементы управления в сером цвете. Обратите внимание, что элементы формы внутри элемента <legend> не будут отключены.
form HTML5: Этот атрибут принимает значение атрибута id элемента <form>, с которой вам нужно связать <fieldset>, даже если он находится вне формы.
name HTML5: Имя, связанное с группой.
Примечание: Заголовок для устанавливается первым <legend> внутри него.

Есть несколько особенностей стилизации <fieldset>.

По умолчанию, значение свойства display равняется block, что создаёт блочный контекст форматирования. Если установить значение display как inline-элементу <fieldset>, это будет работать как inline-block, в ином случае, это будет работать как block. По умолчанию, имеется border 2px groobe вокруг содержимого и небольшой внутренний отступ. Элемент имеет min-inline-size: min-content по умолчанию.

Если задан <legend>, он будет помещён поверх верхней границы. <legend> сжимается и переносится, также имеет свой контекст форматирования. Значение display блочное (например, display: inline работает как block).

Простой fieldset

Этот пример показывает простой <fieldset> с <legend> и единственным элементом управления внутри.

<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio">
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

Отключённый fieldset

Этот пример показывает отключённый <fieldset> с двумя элементами управления внутри.

<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" value="Chris">
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" value="Wookie">
    </div>
  </fieldset>
</form>

BCD tables only load in the browser

Другие связанные элементы:

html — Как мне изменить цвет радио кнопок?

Как упомянул Фред, нет способа встроить радио-кнопки в цвет, размер и т.д. Но вы можете использовать псевдоэлементы CSS, чтобы установить самозванца для любой данной радиокнопки и стилизовать его. Касаясь того, что сказал JamieD, о том, как мы можем использовать псевдоэлемент: after, вы можете использовать оба: before и: after для достижения желаемого вида.

Преимущества этого подхода:

Разработайте свою радио-кнопку, а также добавьте метку для контента.
Измените цвет внешнего обода и/или отмеченный круг на любой понравившийся вам цвет.
Придайте ему прозрачный вид с изменениями свойства цвета фона и/или необязательным использованием свойства непрозрачности.
Масштабируйте размер своей радиокнопки.
При необходимости добавьте различные свойства теней, таких как CSS.
Смешайте этот простой трюк CSS/HTML с различными Grid-системами, такими как Bootstrap 3.3.6, чтобы он визуально соответствовал остальным компонентам Bootstrap.

Объяснение короткой демонстрации ниже:

Установите относительный встроенный блок для каждой радиокнопки
Скройте родной смысл переключателя, нет способа напрямую его стилизовать.
Стиль и выравнивание этикетки
Перестройка CSS-содержимого на псевдоэлементе: before для выполнения двух действий — стилизация внешнего края переключателя и установка первого элемента (слева от содержимого метки). Вы можете узнать основные шаги по псевдоэлементам здесь — http://www.w3schools.com/css/css_pseudo_elements.asp
Если установлен переключатель, запросите метку для отображения содержимого CSS (выделенная точка в переключателе) впоследствии.

HTML

<div>
    <input type="radio" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div>
    <input type="radio" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

A короткая демонстрация чтобы увидеть это в действии

В заключение, JavaScript, изображения или батареи не требуются. Чистый CSS.

Стилизация checkbox и radio на CSS · GitHub

css — Стилизация checkbox и radio на CSS · GitHub

Instantly share code, notes, and snippets.

css — Стилизация checkbox и radio на CSS

	label
	input(type=»checkbox»).checkbox
	span.checkbox-custom
	span.label AGB
	===
	.checkbox
	display: none
	/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
	.checkbox-custom
	position: relative // Обязательно задаем, чтобы мы могли абсолютным образом позиционировать псевдоэлемент внютри нашего кастомного чекбокса */
	width: 20px // Обязательно задаем ширину */
	height: 20px // Обязательно задаем высоту */
	border: 2px solid #ccc
	border-radius: 3px
	.checkbox-custom,
	.label
	display: inline-block
	vertical-align: middle
	/* Если реальный чекбокс у нас отмечен, то тогда добавляем данный признак и к нашему кастомному чекбоксу */
	.checkbox:checked + .checkbox-custom::before
	content: «» //* Добавляем наш псевдоэлемент */
	display: block // Делаем его блочным элементом */
	position: absolute //* Позиционируем его абсолютным образом */
	/* Задаем расстояние от верхней, правой, нижней и левой границы */
	top: 2px
	right: 2px
	bottom: 2px
	left: 2px
	background: #413548 //* Добавляем фон. Если требуется, можете поставить сюда картинку в виде «галочки», которая будет символизировать, что чекбокс отмечен */
	border-radius: 2px

	****
	<label>
	<input type=»radio» name=»radio-test»>
	<span></span>
	<span>Lorem ipsum dolor sit amet, consectetur</span>
	</label>
	===
	.checkbox,
	.radio {
	display: none;
	}
	.checkbox-custom,
	.radio-custom {
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	border-radius: 3px;
	position: relative;
	}
	.checkbox-custom,
	.radio-custom,
	.label {
	display: inline-block;
	vertical-align: middle;
	}
	.checkbox:checked + .checkbox-custom::before,
	.radio:checked + .radio-custom::before {
	content: «»;
	display: block;
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	background: #413548;
	border-radius: 2px;
	}
	.radio-custom,
	.radio:checked + .radio-custom::before {
	border-radius: 50%;
	}
	//https://webcareer.ru/stilizaciya-checkbox-i-radio-na-css.html

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Каким образом создается стиль радиокнопки CSS? [Уловки CSS]

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

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

Будь сильным. Скрыть флажки

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

 .section input [type = "radio"],
.section input [type = "checkbox"] {
  дисплей: нет;
}

Но, Мэтью, вы можете сказать, что мы будем делать без них? Не беспокойтесь, мы создадим собственные флажки, с блэкджеком и… ну, давайте просто займемся этим.

Переключатель CSS

Во-первых, это наша разметка:

 <раздел>
    
      
        Кофе  
    
    
      
        Чай  
    
    
      
        Капучино