Radio input type css: 🤷🏽‍♀️ Page not found | MDN Web Docs — Программирование на Python и Objective-C в Mac OS

Содержание

Стилизация input radio и checbox кнопок (на чистом CSS) – Di-Grand

Сегодня хочу поделится с вами несколькими вариантами стилизации input type=»radio» а так же input type=»checkbox» . Ни для кого не секрет, что без стилизации этих элементов не бывает жизни у верстальщиков. На своей практике я почти в каждом проекте встречаю кастомную стилизацию radio и checbox.

В интернете есть масса способов их стилизации, но большинство из них либо устарели, либо используют скрпты. Что в свою очередь увеличивает вес страницы. Это для SEO не есть хорошо. И так, давайте начнем, ниже я буду показывать вам готовые примеры стилизации input radio и checbox (на чистом css)

1. Стилизация radio кнопок

Данный способ подойдет тем, кому надо оформить radio в виде кнопок, без флажков и т.д.

Пример стилизации radio в виде кнопок, без флажков в реальном интернет магазине

See the Pen
Стилизация radio кнопок by Tom Johnson (@OwlThemes)
on CodePen.

2. Стилизация checkbox флажков

Оформляем ваши checkbox флажки. Данный способ стилизирует сами флажки, думаю проблем разобраться у вас не будет. Для самого флажка checkbox используется svg картинка, для качественного отображения на retina экранах. Пример с рабочего сайта:

See the Pen
Стилизация checkbox by Tom Johnson (@OwlThemes)
on CodePen.

3. Стилизация radio флажков

И последний вариант, это оформление radio флажков.

See the Pen
Стилизация radio флажков by Tom Johnson (@OwlThemes)
on CodePen.

Стилизация элементов checkbox и radio button на CSS3

Часто ли Вы создаете различные формы, опросы на своих сайтах? Если да, то наверняка Вам хотелось изменить стандартные элементы. В этой статье покажем, как можно легко и просто заменить стандартные элементы checkbox (флажки) и radio button (переключатели) на свои. Использовать будем средства только CSS3.

HTML разметка

Расположим элементы на странице:


	
<!-- Элемент флажок -->
<input type="checkbox" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

<!-- Элемент переключатель -->
<input type="radio" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>

Здесь ничего особенного, каждому элементу задаем id и name, также используем label для описания элементов «переключателя» и «флажка». Внутрь тега label, вставляем span. Для чего именно, написано ниже.

Правила CSS

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


	
input[type="checkbox"] {
    display:none;
}

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


	
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

С помощью CSS селектора выбираем все span внутри тега label, которые принадлежат элементам input с типом >checkbox (т.е. выбираем все «флажки»). И используем вот такой спрайт (одно общее изображение, вместо множества):

Для выбранных span задаем высоту и ширину в 19px, и располагаем фоновое изображение.

Осталось только организовать правило для активного «флажка» (псевдо-селектор :checked). Для этого просто смещаем данное изображение влево на 19px:


	
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Вот таким не хитрым способом, с применением нескольких тактик можно организовать на сайте, элементы на свой вкус. Для «переключателей» правила выстраиваются подобным образом, только соответственно фоновое изображение смещается еще на 19px и немного изменятся css селектор, вместо type=»checkbox» используется type=»radio».

Голосов: 941 | Просмотров: 7604

Стилизация 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 стилей.

Стилизация флажков и переключателей с использованием CSS

Стилизация флажков и переключателей стала возможной с введением псевдокласса: checked в CSS3.
На этой странице описаны два метода: метод на основе изображений, показанный в демонстрации ниже, и метод чистого CSS.

Скачать примеры

Архивы ниже содержат два набора файлов примеров, демонстрирующих методы стилизации на основе изображений и чистого CSS, описанные на этой странице.

Стиль на основе изображений

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

Для каждого флажка или переключателя используется HTML следующей формы:

  
  
   Значение

Элементы ввода и метки показаны здесь в отдельных строках для повышения удобочитаемости; их обычно следует размещать на одной линии, без промежутков между ними, для более точной укладки.

Мы скрываем чекбоксы и переключатели в таблице стилей:

  ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 28 пикселей;
  маржа: 0;
  отступ: 0;
  непрозрачность: 0;
}

Селекторы в строках 1 и 2 используют псевдокласс отрицания, чтобы скрыть правило от старых браузеров. Строки 3–5 устанавливают ширину, поля и отступы, чтобы можно было точно позиционировать альтернативную графику.
Строка 6 устанавливает непрозрачность, чтобы сделать стандартный пользовательский интерфейс невидимым.

Затем мы размещаем метку и отображаем непроверенное изображение:

  input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -28 пикселей;
  отступ слева: 28 пикселей;
  фон: url ('проверяет.png ') без повтора 0 0;
  высота строки: 24 пикселя;
}

Строка 3 устанавливает метку для отображения в виде встроенного блочного элемента, позволяя строке 7 установить ее высоту равной высоте альтернативной графики и центрировать текст по вертикали.
В строке 4 используется отрицательное поле, чтобы закрыть пространство, в котором будет отображаться стандартный пользовательский интерфейс, а в строке 5 затем используется заполнение, чтобы восстановить текст метки в правильном положении.
Значение 28 пикселей, используемое здесь и в предыдущем правиле, равно ширине изображения плюс некоторый дополнительный отступ, чтобы текст метки не располагался слишком близко к изображению.Строка 6 отображает непроверенное изображение в пространстве перед текстом метки.

Наконец, мы отображаем выбранные изображения, когда установлены флажки и переключатели:

  input [type = checkbox]: not (old): checked + label {
  background-position: 0 -24px;
}

input [type = radio]: not (old): checked + label {
  фоновая позиция: 0 -48 пикселей;
}

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

Стиль на чистом CSS

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

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

  
  
       Значение

Элементы диапазона внутри метки используются для создания альтернативной графики.В то время как радиокнопки требуют обоих диапазонов, для флажков нужен только один.

Мы скрываем чекбоксы и переключатели в таблице стилей:

  ввод [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ширина: 2em;
  маржа: 0;
  отступ: 0;
  размер шрифта: 1em;
  непрозрачность: 0;
}

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

Затем мы размещаем метку:

  input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  дисплей: встроенный блок;
  маржа слева: -2em;
  высота строки: 1.5em;
}

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

Затем мы стилизуем первый диапазон, чтобы создать непроверенную графику:

  input [type = checkbox]: not (old) + label> span,
input [type = radio]: not (old) + label> span {
  дисплей: встроенный блок;
  ширина: 0. 875em;
  высота: 0,875em;
  маржа: 0,25em 0,5em 0,25em 0,25em;
  граница: 0,0625 мкм, сплошной RGB (192,192,192);
  радиус границы: 0,25 м;
  фон: rgb (224 224 224);
  фоновое изображение: -moz-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -ms-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -o-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: -webkit-linear-gradient (RGB (240,240,240), RGB (224,224,224));
  фоновое изображение: линейный градиент (RGB (240,240,240), RGB (224,224,224));
  вертикальное выравнивание: снизу;
}

Используемые здесь методы подробно описаны на странице, посвященной стилизации кнопок с помощью CSS3.Строка 15 обеспечивает размещение графики внизу этикетки, а не на базовой линии текста.

В этом примере градиент фона меняется на противоположный для выбранных флажков и переключателей:

  input [type = checkbox]: not (old): checked + label> span,
input [type = radio]: not (old): checked + label> span {
  фоновое изображение: -moz-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -ms-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -o-linear-gradient (RGB (224,224,224), RGB (240,240,240));
  фоновое изображение: -webkit-linear-gradient (RGB (224, 224, 224), RGB (240, 240, 240));
  фоновое изображение: линейный градиент (RGB (224,224,224), RGB (240,240,240));
}

Затем мы отображаем галочку внутри выбранных флажков:

  input [type = checkbox]: not (old): checked + label> span: before {
  содержание: '✓';
  дисплей: блок;
  ширина: 1em;
  цвет: rgb (153 204 102);
  размер шрифта: 0. 875em;
  высота строки: 1em;
  выравнивание текста: центр;
  тень текста: 0 0 0,0714em rgb (115,153,77);
  font-weight: жирный;
}

Селектор в строке 1 использует псевдокласс: before, поэтому в строке 2 можно вставить символ галочки внутри элемента span.
В строках 3, 4, 6, 7 и 8 галочка отображается в центре элемента, а в строках 5, 9 и 10 делается стиль текста.

Наконец, мы отображаем «маркер» внутри выбранных переключателей, применяя те же методы, что и для непроверенной графики, ко второму элементу диапазона:

  input [type = radio]: not (old): checked + label> span> span {
  дисплей: блок;
  ширина: 0.5em;
  высота: 0,5 мм;
  маржа: 0,125 эм;
  граница: 0,0625 мкм сплошной RGB (115,153,77);
  радиус границы: 0,125 м;
  фон: rgb (153 204 102);
  фоновое изображение: -moz-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -ms-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -o-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: -webkit-linear-gradient (RGB (179,217,140), RGB (153,204,102));
  фоновое изображение: линейный градиент (RGB (179 217 140), RGB (153 204 102));
}

88 Radio Buttons CSS

Коллекция HTML и CSS Radio Button Примеры кода : custom, multiple и radio button group . Обновление коллекции за март 2020 года. 11 новинок.