ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стилизация флажков и переключателей на CSS3

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

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

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

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

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

1.

Лучший CSS-флажок и фрагменты стиля кнопки «Радио»

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

Вообще переходим к установке:

HTML

Код

CSS

Код

.originalem-something {
  position: absolute;
  top: 47%;
  left: 47%;
  width: 165px;
  height: 50px;
  text-align: center;
  margin: -25px 0px 0px -63px;
  background: #0087bc;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid #ececec;
  border-radius: 5px;
}
.originalem-something span {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 47%;
  left: 47%;
  margin: -3px 0px 0px -5px;
  background: #f9f9f9;
  display: block;
  -webkit-transform: rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  -moz-transform: rotate(-45deg);
  -moz-transition: all 0.2s ease;
  -ms-transform: rotate(-45deg);
  -ms-transition: all 0.2s ease;
  transform: rotate(-45deg);
  transition: all 0.2s ease;
}
.originalem-something span:after {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 12px;
  margin-top: -8px;
  background: #ffffff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
input[type=radio] {
  display: none;
}

.originalem-something label {
  cursor: pointer;
  color: rgba(43, 43, 43, 0);
  width: 59px;
  font-family: 'Roboto';
  font-weight: 400;
  line-height: 47px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

label[for=yes] {
  position: absolute;
  left: 0px;
  height: 20px;
}
label[for=no] {
  position: absolute;
  right: 0px;
}
#no:checked ~ .originalem-something {
  background: #127d17;
}
#no:checked ~ .originalem-something span {
  background: #f9f7f7;
  margin-left: -8px;
}
#no:checked ~ .originalem-something span:after {
  background: #fbfafa;
  height: 20px;
  margin-top: -8px;
  margin-left: 8px;
}
#yes:checked ~ .originalem-something label[for=yes] {
  color: #fbfafa;
  font-weight: bold;
}
#no:checked ~ .originalem-something label[for=no] {
  color: #fbfafa;
  font-weight: bold;
}

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

Демонстрация

16 Июля 2018 Просмотров: 1337 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 16 Июля 2018 23:09¹ 0 Вообщем, должен вместо зеленого красный оттенок быть, но все в CSS, выставляется.