Украсьте радио, флажки и кнопки переключения с помощью CSS3

CSS

Украсьте радио, флажки и кнопки переключения с помощью CSS3

Опубликован в by Пристань дураковПросмотрено 1584 раз Поделиться:

Сяобиан рекомендует:НаггетсЭто высококачественное техническое сообщество, от ECMAScript 6 до Vue.js, от оптимизации производительности до библиотек классов с открытым исходным кодом, так что вы не пропустите каждую техническую галантерею в разработке интерфейса. Найдите «Наггетс» на основных рынках приложений, чтобы загрузить приложение, и вы сможете освоить технические галантерейные товары.

Много раз нам нужно было украсить радио и флажки множественного выбора, потому что собственный стиль уродлив, а производительность неоднородна. До CSS3 для имитации обычно использовался js, но теперь можно использовать чистый CSS для украшения радио и флажков. Для мобильного терминала уже давно написаны соответствующие стили симуляции:Флажок, адаптированный для мобильного терминалаа такжекнопка переключения реализована css3. Эти две статьи поддерживают только мобильные страницы, а webkit также поддерживает страницы с одним маркером.inputэлементы создаются с использованием псевдоклассов (:beforeили:after). Недавно я сделал проект на стороне ПК, учитывая, что он совместим с большим количеством браузеров для ПК, поэтому на его основе были сделаны некоторые улучшения.

Давайте сначала посмотрим на эффект:

Затем посмотрите на структуру HTML:

<label class="bui-radios-label bui-radios-anim">
    <input type="radio" name="sex"/><i class="bui-radios"></i> 男
</label>

Эта структура имеетlabelэтикетка, содержащаяinputэлементы иiэлемент. Основной принцип: первое использованиеvisibility: hidden; opacity: 0;БудуinputЭлементы «скрыты», используяlabelСвойство метки, которое при щелчке будетinputЭлементы выбраны или не отмечены.iПсевдокласс привязки элемента (:beforeили:after) имитирует появление радио и флажков.

Наконец, посмотрите на код CSS:

/* radio */
label.bui-radios-label input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
 
label.bui-radios-label .bui-radios {
  display: inline-block;
  position: relative;
  width: 13px;
  height: 13px;
  background: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 50%;
  vertical-align: -2px;
}
 
label.bui-radios-label input:checked + .bui-radios:after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}
 
label.bui-radios-label input:checked + .bui-radios {
  background: #00B066;
  border: 1px solid #00B066;
}
 
label.bui-radios-label input:disabled + .bui-radios {
  background-color: #e8e8e8;
  border: solid 1px #979797;
}
 
label.bui-radios-label input:disabled:checked + .bui-radios:after {
  background-color: #c1c1c1;
}
 
label.bui-radios-label.bui-radios-anim .bui-radios {
  -webkit-transition: background-color ease-out .3s;
  transition: background-color ease-out .3s;
}

Полные демонстрационные примеры радио, флажков и переключателей:Woohoo. Css88.com/demo/beau body ...

Здесь следует отметить несколько очков:
1. Хук в чекбоксе использует иконографию, конечно можно изменить изображение, или использовать псевдокласс(:beforeили:after) моделирование.
2. Добавлено несколько простых эффектов перехода или фоновой анимации.
3. Особое значение имеет: использованиеlabelХарактеристики тега, HTML основа для хороших студентов, пожалуйста, посмотрите наlabelСвойства этикетки.

Обратите внимание на официальный публичный аккаунт WEB front-end разработки

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

Категории