Css изменить checkbox: Как поменять стиль input type=»checkbox»? — Хабр Q&A

Меняем оформление input checkbox с помощью CSS

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

<input type=»checkbox» />
<label for=»checkbox-id»>Чекбокс как есть</label>

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

// это работать не будет
input[type=»checkbox»] {
border: 1px solid #f00;
background: #f00;
border-radius: 5;
}

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

1. Скрываем вывод чек-бокса;
2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
3. Дополнительные стили формируют внешний вид текущего статуса.

Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.

/* прячем input checkbox */
input[type=»checkbox»] {
display: none;
}

/* стили для метки */
label {
  color: #000;
cursor: default;
font-weight: normal;
line-height: 30px;
padding: 10px 0;
vertical-align: middle;
}

/* формируем внешний вид чекбокса в псевдоэлементе before */
label:before {
content: » «;
color: #000;
display: inline-block;
font: 20px/30px Arial;
margin-right: 15px;
position: relative;
text-align: center;
text-indent: 0px;
width: 30px;
height: 30px;
background: #FFF;
border: 1px solid #e3e3e3;
border-image: initial;
vertical-align: middle;
}

/* вариации внешнего вида в зав-ти от статуса checkbox */
/* checked */
input:checked + label:before {
content: «x»;
}
/* disabled */
input:disabled + label:before {
background: #eee;
color: #aaa;
}

Теперь внешний вид становится везде одинаковым и выглядит вот так:

Как видите для вывода галочки я использовал просто символ «x» из шрифта Arial. Далее вы можете сами решать как выглядит контейнер и галочка.

Я к примеру использую шрифт awesome, в котором есть литера галочки.

Вот тот же CSS с использованием FontAwesome:

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

label {
  color: #000;
cursor: default;
font-weight: normal;
line-height: 30px;
padding: 10px 0;
vertical-align: middle;
}

label:before {
content: » «;
color: #000;
display: inline-block;
/* шрифт Awesome*/
font: 20px/30px FontAwesome;
margin-right: 15px;
position: relative;
text-align: center;
text-indent: 0px;
width: 30px;
height: 30px;
background: #FFF;
border: 1px solid #e3e3e3;
border-image: initial;
vertical-align: middle;
}

input:checked + label:before {
/* глифон — галочка */
content: «\f00c»;
}

input:disabled + label:before {
background: #eee;
color: #aaa;
}

Так выглядит checkbox с галочкой из набора иконок Awesome.

Написать комментарий

Данная запись опубликована в 27.12.2017 17:23 и размещена в Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Перенос слов в CSS

Март 28, 2016 г.

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и …

Читать

Переключатель стилей на чистом CSS с помощью :checked

От автора: еще пару лет назад разработчики уже могли создавать множество проектов с помощью одного лишь CSS без применения JavaScript. Но сегодня CSS настолько окреп, что можно писать поистине удивительные вещи без единой строки JavaScripta’а. Скорее всего вы уже читали статьи на тему «способы на чистом CSS», в которых демонстрируется мощь каскадных таблиц стилей.

Когда дело касается чисто CSS методов, мы не можем игнорировать псевдокласс :checked, его я и буду использовать в этой статье. Конечно, я не первый, кто пишет об этом способе, уже велись довольно обширные споры по поводу использования элементов формы в качестве замены JavaScript’у. К примеру, статья с Adobe Louis Lazaris и это замечательное слайд шоу от Ryan Seddon.

Применение :checked

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

А теперь можно продолжать.

Создание блока настроек

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

/* нам не нужно, чтобы input’ы были видны, нужны только лейблы */
input[type=»checkbox»], input[type=»radio»] {
position: absolute;
visibility: hidden;
}

.settings-box-element {
z-index: 10;
}

Поскольку нам необходимо отображать только лейблы, то код выше как раз и прячет чекбоксы и радиокнопки. Более того, всем лейблам присвоен класс settings-box-element со свойством z-index , нам нужно, чтобы эти поля всегда оставались поверх страницы.

Теперь мы можем разобраться в коде блока настроек. Начнем с кнопки-шестеренки. Ее код:

HTML

<!—иконка шестеренки, открывает блок при клике на нее —>
<input type=»checkbox»>
<label for=»settings-btn»></label>

CSS

.settings-btn + label {
position: fixed;
top: 130px;
right: 0;
display: block;
width: 35px;
color: #e83737;
text-align: center;
background: #fff;
cursor: pointer;
}

Если вы читали хоть одну или даже две статьи о том, как использовать элементы формы, чтобы не применять JavaScript, то вы уже знаете, что нужно использовать input’ы вместе с лейблами. А значит, если хоть один удалить, то ничего не сработает. У нас есть чекбокс с id=»settings-btn» и лейбл с атрибутом for, указывающим на значение id. Также я добавил класс settings-btn, чтобы использовать его потом.

В CSS лейбл спозиционирован фиксировано position: fixed с соответствующими значениями top и right. Следом идет белый бокс, якобы содержащий кнопки:

HTML

<!—белый бокс, содержащий кнопки —>
<div></div>

CSS

.buttons-wrapper {
position: fixed;
top: 130px;
right: -200px; /* должно совпадать со значением ширины */
width: 200px;
height: 240px;
background: #fff;
}

Наш бокс это пустой DIV с классами «buttons-wrapper» и «settings-box-element». Как я уже говорил выше, последний класс в основном используется для добавления z-index. «buttons-wrapper» нужен чтобы стилизовать сам DIV. И, как вы можете заметить, боксу задана ширина в 200px и высота в 240px. Это чтобы вместились 5 кнопок, можете посмотреть демо. Также задано позиционирование fixed и соответствующие значения right top. Единственное, что стоит отметить, что значение свойства right должно совпадать с шириной блока, но с отрицательным значением (чтобы блок исчез из поля зрения).

Теперь взглянем на код оставшихся 5 кнопок. В комментариях указан фон, к которому относится кнопка:

<!—стили фона —>
<!—светлый фон (#eaeaea) —>
<input type=»radio» name=»layout» checked>
<label for=»light-layout»>
Light Background</label>

<!—темный фон (#494949) —>
<input type=»radio» name=»layout»>
<label for=»dark-layout»>
Dark Background
</label>

<!—фон-изображение —>
<input type=»radio» name=»layout»>
<label for=»image-layout»>
Image Background</label>

<!— фон-шаблон —>
<input type=»radio» name=»layout»>
<label for=»pattern-layout»>
Pattern Background</label>

<!— показать/спрятать контент—>
<input type=»checkbox»>
<label for=»hide-show-content»>
Hide/Show content</label>

.layout-buttons {
display: block;
width: 150px;
padding: 10px 0;
text-align: center;
border: 2px solid black;
box-sizing: border-box;
font-size: 0.875em;
cursor: pointer;
}

.light-layout + label {
position: fixed;
top: 140px;
right: -150px;
}

.dark-layout + label {
position: fixed;
top: 185px;
right: -150px;
}

.image-layout + label {
position: fixed;
top: 230px;
right: -150px;
}

.pattern-layout + label {
position: fixed;
top: 275px;
right: -150px;
}

.hide-show-content + label {
position: fixed;
top: 320px;
right: -150px;
}

Обратите внимание на то, что первый чекбокс уже отмечен атрибутом «checked». Мы используем его по умолчанию.
Каждый инпут имеет свой id, а каждый лейбл свой for, и они совпадают между собой. И вы можете знать, а может и нет, но весь секрет с атрибутом for в том, что, если мы его используем, то при клике на лейбл с атрибутом for автоматически выбирается чекбокс или радиокнопка. Вот почему мы можем использовать псевдокласс :checked.

Всем лейблам присвоен класс «layout-buttons». Он используется для добавления базовых и общих стилей, как ширина, padding, border и т.д. Другие классы используются для индивидуальной стилизации. Как вы могли заметить, для иконки шестеренки и для белого бокса используется фиксированное позиционирование с определенными значениями top и right. А значение top для каждого лейбла больше на 45px, чем у предыдущего; это нужно, чтобы кнопки стали в столбец, не налегая друг на друга. Также обратите внимание на то, что значение right равняется ширине кнопок, только с отрицательным значением.

Осталась последняя часть CSS кода:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

input[type=»radio»]:checked + label {
background: #e83737;
color: #fff;
border-color: #e83737;
}

Эти стили используются для замены стилей по умолчанию для лейблов с выбранными радиокнопками (у нас их 4). Я использовал смежные селекторы, чтобы определить из всех инпутов радиокнопки. Свойствам присвоено значение #e83737, цвет #fff.

Ничего сверх сложного. Оставшиеся элементы обернуты DIV’ом.

<div>
<div>
<h2>Cool stuff with CSS only!</h2>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>

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

Итак, основной контент обернут в div с классом class=»main-wrapper». И, как вы увидите позже, чтобы изменить стили этого DIV’а, нам нужно будет написать что-то похожее:

input[type=»checkbox»]:checked ~ main-wrapper {
/* стили */
}

Чтобы выбрать главный DIV мы используем селектор ~.

Клик по иконке настроек

По клику должен появляться блок настроек. Код ниже позволяет это сделать:

.settings-btn:checked + label {
right: 200px; /* совпадает с шириной .buttons-wrapper */
}

.settings-btn:checked ~ .buttons-wrapper {
right: 0;
}

.settings-btn:checked ~ .layout-buttons {
right: 30px;
}

Когда пользователь кликает на иконку настроек, будет выбран чекбокс с id=»settings-btn». После нажатия происходит следующее:

Селектор смежных элементов (+) заставляет лэйблы выезжать на 200px после того, как будут выбраны чекбоксы.

Селектор ~ заставляет выезжать элементы с классами «buttons-wrapper» и «layout-buttons» до значений 0 и 30px соответственно из правого края.

Оба селектора в нашем примере незаменимы, и без них ничего бы не работало.

Замена фона

Я напомню вам HTML радио кнопок:

<!—стили фона —>
<!—светлый фон (#eaeaea) —>
<input type=»radio» name=»layout» checked>
<label for=»light-layout»>
Light Background</label>
<!—и еще 3 радио кнопки/лейбла —>

Мы будем менять фон у элемента .main-wrapper. CSS код:

.light-layout:checked ~ .main-wrapper {
background: #eaeaea;
}
.dark-layout:checked ~ .main-wrapper {
background: #494949;
}
.image-layout:checked ~ .main-wrapper {
background: url(image url) no-repeat center 0 fixed;
}
.pattern-layout:checked ~ .main-wrapper {
background: url(images/pattern1.png) repeat;
}

По HTML коду мы имеем 4 набора инпутов типа type=»radio» и 4 лейбла. По клику на любой лейбл будет выбран связанный с ним инпут, а значит сработает псевдокласс :checked. Затем в зависимости от выбранного лейбла будет применен один из четырех стилей к блоку-обертке.

Прячем/показываем контент

Я использую чекбокс для отображения и скрытия контента:

<!— показать/скрыть контент —>
<input type=»checkbox»>
<label for=»hide-show-content»>
Hide/Show content</label>

.hide-show-content:checked ~ .main-wrapper .content {
display: none;
}

В этом случае, когда пользователь кликает на соответствующий лейбл, тем самым выбирая чекбокс, мы даем браузеру команду выбрать элемент с классом class=»content» и установить значение display: none.

Заключение

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

Автор: Omar Wraikat

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Стилизация checkbox и radio

Оглавление

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

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

1. Помимо самих элементов которые мы будем стилизовать (<input type="checkbox"> и <input type="radio">), нам понадобится тег <label>, благодаря которому переключать элемент можно будет кликая на текст, а не только на сам элемент.
2. Тег <input> должен находиться до тега <label> . В этом случае состояние элемента формы переключается с помощью атрибута for.

«Магия» заключается в использовании псевдоселекторов :checked и :not. При этом сам чекбокс или радио-кнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега <label>.

#

Оформление чекбокса

HTML разметка для чекбокса будет выглядеть следующим образом:

<!-- Стилизация checkbox  -->
<div>
    <input type="checkbox" />
    <label for="checkbox1">Checkbox 1</label>
</div>

<div>
    <input type="checkbox" />
    <label for="checkbox2">Checkbox 2</label>
</div>

Еще раз — тег <input> обязательно должен быть расположен перед тегом <label>. Если вы поменяете их местами, ничего работать не будет.

#

CSS-стили для чекбокса:

.element-wrapper {
    padding: 10px;
}

/* 
//////////////////////
Стилизация checkbox 
//////////////////////
*/

.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox + label {
    position: relative;
    vertical-align: middle;
    padding: 0 0 0 30px;
    cursor: pointer;
}

/* Чекбокс в состоянии неактивен */
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 19px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
}

/* Чекбокс в состоянии активен */
.checkbox + label:after {
    content: '';
    position: absolute;
}

/* Фон чекбокса в состоянии активен */
.checkbox:checked + label:after {
    position: absolute;
    top: 2px;
    left: 3.2px;
    border: 1px solid white;
    background: #413548;
    height: 14px;
    width: 14px;
}

Результат:

Смотреть пример Оформление чекбокса от webinmind.ru (@webinmind).

#

Оформление radio-кнопки

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

<!-- Стилизация radio  -->
<div>
    <input type="radio" name="radio" />
    <label for="radio1">Radio 1</label>
</div>

<div>
    <input type="radio" name="radio" />
    <label for="radio2">Radio 1</label>
</div>

И опять — тег <input> обязательно должен быть расположен перед тегом <label>.

#

CSS-стили для радио-кнопки:

.element-wrapper {
    padding: 10px;
}

/* 
//////////////////////
Стилизация radio 
//////////////////////
*/

.radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}

.radio + label {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
}

/* Оформление радио-кнопки */
.radio + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #FFF;
}

/* Радио в состоянии неактивен */
.radio + label:after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 3.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #413548;
    opacity: 0;
    transition: .2s;
}

.radio:checked + label:after {
    opacity: 1;
}

Результат:

Смотреть пример Оформление radio-кнопки от webinmind.ru (@webinmind).

Вот таким образом можно кроссбраузерно стилизовать стандартный вид чекбоксов и радио-кнопок, применив при этом только лишь инструмент CSS. Кстати, рекомендую прочитать статью про кастомизацию скроллбара браузеров на движке WebKit.

Время работы: 0,1375 s
Время запросов: 0,1375 s
Количество запросов: 27
Источник: cache

Создание стилей для элементов checkbox. CSS

Формы — одна из важнейших частей любого сайта. Она используется для создания форм регистрации, обратной связи. На таких сайтах, как mail.ru, «Вконтакте» и других вы могли видеть регистрационные поля, в которых нужно вводить не только логин и пароль, а еще и личную информацию. Это может быть пол, возраст, личные предпочтения и взгляды и так далее.

При выборе пола даются два варианта: мужской и женский. Они представлены в виде полей для выбора. Эти поля и создаются с помощью HTML тега checkbox.

Поля в HTML не всегда соответствуют дизайну сайта, поэтому их необходимо изменять. В этой статье мы поговорим с вами о том, как сделать стилизацию checkbox в CSS.

Что такое checkbox?

Это значение атрибута тега input, который содержится в теге form. Чаще всего используется для указания личной информации пользователя, например личных предпочтений.

Его отличие от radio в том, что он допускает выбор нескольких полей одновременно.

Создание checkbox. HTML

Чтобы разместить чекбоксы на сайте, необходимо создать форму. Для этого используется парный тег form. Он содержит в себе 2 атрибута — action и method. Первый указывает ссылку на обработчик формы, а второй — на метод индексации и обработки полученных значений.

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

Нам нужны только чекбоксы. Чтобы создать их, задайте атрибут type для тега input, со значением checkbox.

У нас есть пустые чекбоксы, нужно добавить обозначения. Их можно ввести после тега input.

Чтобы checkbox работал корректно, укажите атрибут value и name. Name — обязателен для обработчика, задавайте ему значение, равное названию поля. Value (значение чекбокса) — необязательный атрибут, но лучше использовать его для удобства.

Есть еще один атрибут — checked. Он не имеет никаких значений, используется для выбора поля при загрузке. То есть, если вы зададите чекбоксу этот атрибут, то он будет выбран по умолчанию.

Вот пример создания чекбоксов:

Оформление checkbox. CSS

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

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

Чтобы изменить расположение checkbox в CSS, используем свойство margin. С его помощью мы сделаем так, чтобы наши чекбоксы располагались в центре веб-страницы, на небольшом расстоянии друг от друга.

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

Создадим 3 тега label на 3 тега input. Каждый label должен находиться перед полем input. Это парный тег, который имеет обязательный атрибут for. Он нужен для привязки этого тега к полю формы.

Создаем 3 идентификатора для наших полей: check1, check2, check3. Эти же значения указываем в атрибуте for. Теперь они привязаны к чекбоксам.

Далее для каждого input указываем один класс — check. Он послужит в качестве селектора для работы над оформлением checkbox в CSS.

Теперь допишите ваш CSS код, чтобы он выглядел так:

Тут есть некоторые стили, которые не относятся к самим чекбоксам, но это нужно для общего оформления страницы.

Если вы все сделали правильно, то теперь ваша форма с чекбоксами будет иметь нормальный вид.

Стильные чекбоксы и радиокнопки на CSS3

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

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

Скройте чекбоксы

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

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}

Вы можете спросить, а что же мы будем делать без них? Но не переживайте, мы сделаем наши собственные чекбоксы.

Радиокнопки

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

<section>
    <div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-2"><span>Tea</span></label>
    </div>
    <div>
      <input type="radio" name="group1">
      <label for="radio-3"><span>Cappuccino</span></label>
    </div>
</section>

Теперь у нас есть раздел с тремя радиокнопками. Мы рассмотрим чекбоксы чуть позже в этом посте, по тому же принципу. Каждый input обернут в div с классом container. Кроме того, каждый input имеет label со span в нём.

Важно!

Поскольку мы скрыли входы радио и чекбоксов, единственный способ для нас получить к ним доступ — использовать label тег. Для правильной работы тег label должен содержать атрибут «for» с идентификатором соответствующего ввода. Если вход имеет идентификатор «radio-1», то атрибут «for» также должен быть «radio-1». Вы можете удивиться, почему текст внутри каждого label обернут в span:

<div>
      <input type="radio" name="group1">
      <label for="radio-1"><span>Coffee</span></label>
</div>

Так как мы собираемся стилить кнопки с псевдоэлементами «::before и «::after, нам понадобиться родительский элемент, на основе которого они могут быть расположены. В этом случае это будет наш label:

.container label {
  position: relative;
}

Вот стили, которые подходят как для чекбоксов, так и для радиокнопок:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Свойства top и bottom установлены на ноль и объединены с «margin: auto;» это позволяет нашим элементам иметь центральное горизонтальное положение.

Вот как выглядят остальные стили:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

Самая важная часть — последний набор правил, в котором в основном и заключается вся фишка. Псевдокласс «: checked» позволяет нам вносить изменения в элементы при проверке ввода. С помощью селектора ‘+’ мы можем выбрать следующий родственный элемент и нацелить наш «span.radio», где мы применяем новые правила к псевдоэлементу «:: after». В этом случае мы меняем его горизонтальное положение и цвет. Чтобы сделать переключение плавным, мы назначаем переход 0,25 секунды для свойства left и background-color. Теперь, когда мы нажимаем переключатель, переключатель движется плавно, а не быстро.

Чекбоксы

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

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

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

Отдельно

Если вы хотите использовать иконку FontAwesome в своем псевдоэлементе, вы должны включить её код в свойство content и указать свойство font-family как «FontAwesome». Например:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Коду «f00c» предшествует обратный слеш, который нужен для отображения символа Юникода.

Юникод можно найти на странице выбранной вами иконки:

Финал

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

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

***

Надеюсь, в этом посте вы нашли полезную и понятную для себя информацию. Буду рада вашим комментариям 🙂

Красивые Radio Buttons (радио кнопка) и Checkbox (чекбокс)

Вам интересно узнать, как можно изменить стили флажков (checkbox css) и переключателей (radio кнопка), без JavaScript? Благодаря CSS3 это возможно!

Шаг 1: Общие сведения

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

Теперь, для тех, кто имеет не очень глубокие знания в это направлении – не бойтесь, читайте далее!

Что же мы будем делать? Используем  CSS3 псевдо селектор  :checked, выполняем проверку вкл/выкл. Затем мы можем использовать “+” смежный селектор от CSS 2.1  сразу после checkbox флажка или радио кнопки, которое в нашем случае это label.

Шаг 2: Настройка нашего HTML кода

Мы начнем с создания HTML и CSS файлов (Вы же можете использовать свои стили, исходя из дизайна Вашего сайта). В данной статье будет продемонстрировано только создание чекбокса, так как радио кнопка имеет такой же принцип её стилизации и также есть в исходнике.

Хорошо, давайте начинать? А начнем мы с создания наших чекбокс input, после чего перейдем к label.

Теперь, только в случае, если вы не знаете много о , Вы должны подключить input и label для того, чтобы вам манипулировать тегом input через label. Это можно сделать, используя for=”» и id=”».

Я также добавлю внутри label, но это более личное предпочтение, но далее Вы поймете зачем он нужен.

Шаг 3: CSS стили

Именно здесь начинается самое интересное. Первое, что необходимо сделать – это скрыть стандартный чекбокс флажок (и это является основой данной статьи). Стили checkbox.

Теперь, когда это сделано, мы можем стилизовать label, но более конкретно span внутри label. Я делаю это таким образом, чтобы сделать положение флажка более точным. Без нее вы бы, вероятно, использовали фоновое изображение для label непосредственно, но таким способом точно его позиционировать сложно.

Позвольте мне коротко объяснить это. Прежде всего, обратите внимание на фон. У меня есть маленький спрайт, так что все, что нужно сделать, это установить фон позиции по span.

Вот остальная часть CSS, специфичные для моего стиля. Это чисто для эстетики.

Шаг 4: Как заставить это работать?

Так, осталось совсем немного . Последнее, что нужно сделать, это определить состоянии элемента при входе, и, возможно, также при наведении курсора мыши. Это довольно просто!

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

Поддержка браузеров

Псевдо-селекторы поддерживаются во всех браузерах, кроме IE – он не поддерживает. Вы не использовать :checked в IE9 и ниже, но его использование более практично.

Поддерживают ли мобильные браузеры – неясно. Mobile Safari Pre IOS 6 не поддерживает его.

Заключение

Спасибо за внимание! Возникнут трудности – пишите в комментариях!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://webdesign.tutsplus.com
Перевел: Владислав Бондаренко

Как проверить чекбокс (checkbox) на php?

Всем привет!
Сегодня расскажу о том, как проверить на php, нажат ли чекбокс (checkbox) или нет.
Такой код написать было не сложно, достаточно владеть основами php. 
Итак, код состоит из html-формы:

<form method="post" action=" ">
    <input ENGINE="checkbox" name="my_bloggood-ru" value="1" />
    <!-- ещё кие-то поля -->
    <input type="submit" name="ок" value="Отправить форму" />
</form>

И обработчика написанного на php конструкции if-else:

<?php
if ( $_POST['my_bloggood-ru'] == '')
{
echo 'не отмечено';
}
  else {
        echo 'отмечено';
       }
?>

В результате вы увидите чекбокс (checkbox) и кнопку «Отправить форму». Если не отметить флажком на чекбоксе и нажать на кнопку «Отправить форму», вы увидите сообщение «не отмечено»:

Если чекбокс будет отмечен, то сообщение будет «отмечено»:

Вот полностью готовый код:

<html>
<head>
<title>Как проверить чекбокс (checkbox) на php - BlogGood.ru</title>
</head>
<body>
<form method="post" action="">
    <!-- ещё кие-то поля -->
    <input type="checkbox" name="my_bloggood-ru" value="1" />
    <input type="submit" name="ок" value="Отправить форму" />
</form>
<?php
if ( $_POST['my_bloggood-ru'] == '')
{
echo 'не отмечено';
}
  else {
        echo 'отмечено';
       }
?>
</body>
</html>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

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

Популярные статьи:

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

Метки: php, для сайта, эффекты для сайта

Checkbox CSS: Стилизация флажка только с помощью CSS

Это кажется очевидным утверждением; стиль должен выполняться с помощью CSS. Но, к сожалению, в случае флажков отсутствует поддержка прямого оформления флажка.

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

Но давайте не будем так быстро переходить к JS для решения фундаментальной проблемы стилизации! Это можно сделать с помощью простого CSS, нам просто нужно немного изменить наше мышление.

1. Стиль для флажка
2. Стиль этикетки
3. Не требует дополнительных узлов DOM или конфигурации (включая значки / изображения)
4. Требуется 0 JavaScript

Поскольку мы не можем стилизовать ввод флажка напрямую с помощью чего-то вроде checkbox-style: awesome; , нам нужно использовать другой подход:

1. Скрыть фактический ввод флажка
2. Показать стилизованный элемент, который выглядит как пустой флажок, когда вход не отмечен
3. Показывать стилизованный элемент, который выглядит как установленный флажок, когда ввод отмечен

Используемые селекторы CSS

1. Селектор типа тип — выбирает все элементы данного типа (например.грамм. input выберет все узлов)

2. Селектор атрибутов [attribute = "value"] — выбирает элемент с атрибутом , где его значение точно равно значение

3. Псевдо-класс : отмечен — выбирает флажки / типы радиовходов или опцию с в выбирает , которые выбраны / отмечены / включены / активны

4. Псевдоэлемент :: до — стилизуемый элемент, который фактически не существует в DOM; считается первым дочерним элементом выбранного элемента

5. Универсальный селектор * — выбирает все / все

6. Дочерний комбинатор > — объединяет два селектора; сужение выбора в правой части только до тех элементов, которые являются прямыми потомками элементов, выбранных в левой части.

7. Комбинатор смежных братьев и сестер + — объединяет два селектора; сужение выделения в правой части только до тех элементов, которые являются братьями и сестрами сразу после элементов в левой части

Используемые важные стили CSS

1. content — используется в псевдоэлементе :: before для установки его содержимого

2. display — в частности none , чтобы скрыть элементы, и inline-block , чтобы наш инлайн-флажок мог иметь одинаковую ширину и высоту

3. ширина / высота — делает то, что вы думаете: устанавливает ширину и высоту элемента

4. цвет — устанавливает цвет текста

5. text-align / vertical-align — используется для корректировки положения нашего флажка / флажка на его метке

6. бордюр стилей — Как мы будем формировать и раскрашивать чекбокс

7. фон — устанавливает цвет фона (используется для заполнения флажка, когда он установлен)

Начало: HTML

Давайте установим наш флажок как дочерний по отношению к его элементу label с родственником span текста ярлыка:

  <этикетка>
  
   Я - флажок 

  

Войти в полноэкранный режимВыйти из полноэкранного режима

Эта структура позволяет щелкнуть текст метки ( Я - флажок ) для переключения флажка без необходимости для или уникальных атрибутов id .Размещение текста в диапазоне сразу после ввода позволит нам выбрать его в CSS.

Первый шаг: скройте нестилируемый флажок

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

  label> input [type = "checkbox"] {
  дисплей: нет;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Установите флажок ( input [type = "checkbox"] ) и убедитесь, что он помечен так, как нам нужно ( label> ).Затем просто отображение : ни одного , чтобы убрать его с наших экранов.

Второй шаг: сделайте наш собственный флажок

Создать пустой квадрат с помощью CSS легко: просто поместите рамку вокруг элемента без содержимого и установите его ширину и высоту. Давайте также поместим его в псевдоэлемент :: before , чтобы избежать добавления ненужного HTML.

  label> input [type = "checkbox"] + * :: before {
  содержание: "";
  дисплей: встроенный блок;
  вертикальное выравнивание: снизу;
  ширина: 1бэр;
  высота: 1бэр;
  радиус границы: 10%;
  стиль границы: сплошной;
  ширина границы: 0.1рем;
  цвет границы: серый;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Здание из выбора в предыдущем разделе; мы добавляем + * , чтобы выбрать любой элемент, если он является прямым последующим родственником интересующего флажка, а затем :: до , чтобы выбрать упомянутый псевдоэлемент для создания поля.

Последний шаг: измените наш флажок, когда он установлен

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

  label> input [type = "checkbox"]: checked + * :: before {
  содержание: «✓»;
  цвет белый;
  выравнивание текста: центр;
  фон: бирюзовый;
  цвет границы: бирюзовый;
}
label> input [type = "checkbox"]: checked + * {
  цвет: бирюзовый;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Важной частью здесь является : проверено помещается после input [type = "checkbox"] (поскольку это элемент, который отмечен или нет).И, к счастью для нас, есть символ галочки, который мы можем установить в качестве содержимого нашего флажка: ✓ .

Бонусные баллы: распространите это на радиокнопки

Как вызов для вас, читатель, та же самая стратегия применима к созданию стилизованной радиокнопки. Используя это как руководство, можете ли вы преобразовать это для входа type = "radio" ? (или просто следуйте за мной, так как это будет следующий выпуск в этой серии)

Спасибо за чтение! Мне нравится делиться и находить такие вещи, в которых общие шаблоны веб-дизайна могут быть выполнены без массивной библиотеки JavaScript или фреймворка, тормозящего страницу.Дайте мне несколько предложений по шаблонам, которые вы хотели бы видеть в разбивке только на CSS / HTML для этой серии.

Хотя в этом примере не было «ненужной DOM»; Также вполне допустимо включение дополнительных span (или двух) для хранения значков svg / font-awesome для более точных / экзотических дизайнов флажков. Затем : отмечен должен использоваться вместо display: none и display: inline-block значки и + должны стать ~ для выбора всех братьев и сестер.

Флажок

CSS: оформление флажков HTML очень просто

Изначально размещено в моем блоге

Старая история

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

Не говоря уже о том, что каждый браузер имел (и до сих пор имеет) свой внешний вид элемента управления, что вносит свой вклад в различие во внешнем виде в разных браузерах.

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

Новая история

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

Новая история, с моей точки зрения, заключается в том, что мы можем стилизовать флажок, не скрывая его и не добавляя изображения SVG и код JavaScript. Это можно сделать, используя вместо этого:

1. CSS внешний вид свойство
2. HTML галочка символ (✓)

Свойство внешнего вида

Свойство внешнего вида используется для отображения элемента с использованием собственного стиля платформы на основе темы операционной системы пользователя.

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

Пример использования:

  .my-class {
   -webkit-appearance: value;
   -моз-внешний вид: значение;
   / * -o-appearance: value; - Не требуется, поскольку в новой версии Opera используется -
      префикс webkit для этого свойства, но мы, тем не менее, добавили его на всякий случай.
      из этого
    * /
   внешний вид: значение;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Хорошо, давайте погрузимся в код.

HTML

Наша разметка HTML довольно проста. У нас есть этикетка , обертывающая наш input и span , чтобы удерживать текст внутри. Выглядит это так:

  <этикетка>
    
     Проверьте меня 

  

Войти в полноэкранный режимВыйти из полноэкранного режима

Здесь нет ничего особенного. Мы использовали элемент-оболочку, чтобы упростить выравнивание внутренних элементов по вертикали.Это делается с помощью макета flexbox, который мы увидим в разделе CSS.

CSS

Стиль CSS выглядит так:

  .checkbox {
    дисплей: встроенный гибкий;
    курсор: указатель;
    положение: относительное;
}

.checkbox> span {
    цвет: # 34495E;
    набивка: 0,5 бэр 0,25 бэр;
}

.checkbox> input {
    высота: 25 пикселей;
    ширина: 25 пикселей;
    -webkit-appearance: нет;
    -моз-внешний вид: нет;
    -о-внешний вид: нет;
    внешний вид: нет;
    граница: 1px solid # 34495E;
    радиус границы: 4 пикселя;
    наброски: нет;
    продолжительность перехода: 0.3 с;
    цвет фона: # 41B883;
    курсор: указатель;
  }

.checkbox> input: checked {
    граница: 1px solid # 41B883;
    цвет фона: # 34495E;
}

.checkbox> input: checked + span :: before {
    содержание: '\ 2713';
    дисплей: блок;
    выравнивание текста: центр;
    цвет: # 41B883;
    позиция: абсолютная;
    слева: 0,7 бэр;
    верх: 0,2 бэр;
}

.checkbox> input: active {
    граница: 2px solid # 34495E;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

  ...

-webkit-appearance: нет;
-моз-внешний вид: нет;
-о-внешний вид: нет;
внешний вид: нет;

...
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Затем нам нужно предоставить наши пользовательские границы и фон:

  ...

граница: 1px solid # 34495E;
радиус границы: 4 пикселя;
наброски: нет;
цвет фона: # 41B883;
курсор: указатель;

...
  

Войти в полноэкранный режимВыйти из полноэкранного режима

И, наконец, мы будем использовать псевдокласс :: before для стилизации символа HTML.В приведенном ниже CSS символ HTML будет красиво окрашен и размещен после того, как мы проверим поле ввода.

  ...

содержание: '\ 2713';
дисплей: блок;
выравнивание текста: центр;
цвет: # 41B883;
позиция: абсолютная;
слева: 0,7 бэр;
верх: 0,2 бэр;

...
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Вот живая скрипка, чтобы поиграть с кодом:

Дальнейшее чтение

Если вас интересуют переменные CSS, посмотрите этот или этот пост, опубликованный в моем блоге.

См. Официальную документацию свойства внешнего вида

Флажок стиля

— Советы CSS

Тестируемый сетевой уровень в Swift — Часть 1

Как стилизовать флажок без использования какой-либо структуры CSS.

‍

‍

Давайте перейдем к делу.Вот как выглядит обычный флажок:

‍

(флажок по умолчанию)

‍

Как сделать стиль для обычного флажка?

Флажки типа ввода HTML не могут быть настроены с какими-либо свойствами, поэтому мы должны проявить творческий подход к тому, как мы настраиваем элемент ввода.

‍

Что? Как?

‍

Шаг 1: Скрыть элемент ввода.

‍

Шаг 2: Добавьте дополнительный элемент span и примените свой собственный стиль, создав класс.

# 1 — Скрытие ввода

Есть три способа скрыть элемент HTML.

• Display: None
• Visibility: Hidden
• Opacity: 0

‍

Если мы установим display: none, то никакие прослушиватели событий (например, прослушиватели щелчков) для этого элемента не будут работать. Нам нужны работающие прослушиватели событий, потому что флажок должен переключать свое состояние с отмеченного на не отмеченное, когда пользователь нажимает на него.

Точно так же проблема с visibility: hidden заключается в том, что некоторые события не будут работать с этим набором свойств.

Если мы установим opacity: 0, элемент будет невидимым, но все прослушиватели событий будут работать; следовательно, — это свойство, которое мы будем использовать для настройки .

‍

CSS:

‍

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

‍

# 2 — Добавление элемента Span

Зачем нам нужен элемент span? Поскольку мы скрываем флажок ввода и показываем элемент с настраиваемым стилем, который появляется и ведет себя как флажок на своем месте, мы используем span в качестве элемента-заполнителя.Мы используем span поверх блочных элементов, таких как div, потому что это встроенный элемент, который не занимает всю ширину.

‍

Вот как будет выглядеть наш обновленный HTML :

‍

‍

Давайте настроим настраиваемый флажок для непроверенного состояния :

‍

‍

И снова для состояния :

‍

Теперь мы можем увидеть нашу работу в действии:

‍

И последнее!

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

‍

‍

С эффектом пульсации:

‍

: проверено — CSS: каскадные таблицы стилей

: проверено Селектор псевдокласса CSS представляет любое радио ( ), флажок ( ) или option ( в ), который отмечен или переключен на по гос.

 
: checked {
  маржа слева: 25 пикселей;
  граница: 1 пиксель сплошного синего цвета;
}
  

Пользователь может включить это состояние, отметив / выбрав элемент, или отключить его, сняв отметку / отменив выбор элемента.

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

Базовый пример

HTML

Да Нет