• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Изменение CSS стилей флажков и переключателей (Стилизация флажков и переключателей с использованием CSS3)
Изменение CSS стилей флажков и переключателей
Kosten
Дата: Четверг, 2020-03-05, 03:09 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


В процессе создание CSS стиля, который предназначен для HTML форм, то веб-разработчики очень часто сталкиваются с таким препятствием, это просто они не могут изменить дизайн элемента флажков "checkboxes", а также переключателей, что идут под аббревиатурой radio buttons.

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

Это изначальный вид, где все по стандарту:



Где после вмешательство и прописывание стилистики, вы увидим такой вид:



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

HTML

Код
<div>
<input type="checkbox" id="cb1"> <label for="cb1">Первый</label>
</div>
<div>
<input type="checkbox" id="cb2"> <label for="cb2">Второй</label>
</div>
<div>
<input type="checkbox" id="cb3"> <label for="cb3">Третий</label>
</div>

<div>
<input type="radio" name="rb" id="rb1" checked> <label for="rb1">Переключатель 1</label>
</div>
<div>
<input type="radio" name="rb" id="rb2"> <label for="rb2">Переключатель 2</label>
</div>
<div>
<input type="radio" name="rb" id="rb3"> <label for="rb3">Переключатель 3</label>
</div>

CSS

Код
input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked)
{
    position: absolute;
    left: -9999px;
}

input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label, input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    line-height: 20px;
    cursor: pointer;
}

input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before, input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    border: 1px solid #c3b5b5;
    background-color: #f1f1f1;
}

input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
    border-radius: 3px;
}

input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
    border-radius: 100%;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
    left: 3px;
    top: 4px;
    width: 10px;
    height: 5px;
    border-radius: 1px;
border-left: 4px solid #8145e1;
    border-bottom: 4px solid #8145e1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #9829c5;
}

input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
}

input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {
    opacity: 1;
}

Корректно отображается и работает на всех современных браузерах.

Демонстрация
Источник: habr.com
Прикрепления: 5744123.png(18.8 Kb) · 7453275.png(19.9 Kb) · checkbox-stylin.zip(3.3 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2020-03-07, 00:04 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29729
Награды: 62


Стилизация флажков без использования JavaScript и Jquery

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



HTML

Код
<ul class="filter-list">
  <li>
    <label class="filter-label" for="bosch">
      <input class="filter-checkbox visually-hidden" type="checkbox" id="bosch" name="bosch" checked>

      <svg class="filter-checkbox-image filter-checkbox-image-on" xmlns="http://www.w3.org/2000/svg" width="27"
        height="23">
        <path d="M7.285 7.486l-2.829 2.829 7.783 7.783L26.171 4.166l-2.828-2.829-11.104 11.102z" />
        <path
          d="M21 20c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h16.908L21.493.415A2.96 2.96 0 0020 0H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3v-9.829l-2 2V20z" />
      </svg>

      <svg class="filter-checkbox-image filter-checkbox-image-off" xmlns="http://www.w3.org/2000/svg" width="23"
        height="23">
        <path
          d="M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" />
      </svg>

      Bosch
    </label>
  </li>
  <li>
    <label class="filter-label" for="interskol">
      <input class="filter-checkbox visually-hidden" type="checkbox" id="interskol" name="interskol">

      <svg class="filter-checkbox-image filter-checkbox-image-on" xmlns="http://www.w3.org/2000/svg" width="27"
        height="23">
        <path d="M7.285 7.486l-2.829 2.829 7.783 7.783L26.171 4.166l-2.828-2.829-11.104 11.102z" />
        <path
          d="M21 20c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h16.908L21.493.415A2.96 2.96 0 0020 0H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3v-9.829l-2 2V20z" />
      </svg>

      <svg class="filter-checkbox-image filter-checkbox-image-off" xmlns="http://www.w3.org/2000/svg" width="23"
        height="23">
        <path
          d="M20 2c.542 0 1 .458 1 1v17c0 .542-.458 1-1 1H3c-.542 0-1-.458-1-1V3c0-.542.458-1 1-1h17m0-2H3C1.35 0 0 1.35 0 3v17c0 1.65 1.35 3 3 3h17c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3z" />
      </svg>

      Интерскол
    </label>
  </li>
</ul>

CSS

Код
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;
  overflow: hidden;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.filter-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.filter-list li {
  margin: 13px 0 17px;
}

.filter-label {
  position: relative;
  padding-left: 36px;
  padding-top: 3.5px;
  padding-bottom: 3.5px;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  cursor: pointer;
}

.filter-checkbox-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 23px;
  fill: #c5c5c5;
  cursor: pointer;
}

.filter-label:hover .filter-checkbox-image {
  fill: #b5b5b5;
}

.filter-checkbox-image-on {
  display: none;
}

.filter-checkbox:checked + .filter-checkbox-image-on {
  display: block;
}

.filter-checkbox:checked ~ .filter-checkbox-image-off {
  display: none;
}

На этом все!

Демонстрация
Прикрепления: 3614859.png(26.8 Kb) · css.zip(3.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Изменение CSS стилей флажков и переключателей (Стилизация флажков и переключателей с использованием CSS3)
  • Страница 1 из 1
  • 1
Поиск: