• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты HTML для сайта » Стилизация радиокнопок и чекбоксов на CSS (Стильная стилистика радио кнопки и флажки с помощью CSS)
Стилизация радиокнопок и чекбоксов на CSS
Kosten
Дата: Среда, 2020-05-20, 23:42 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29297
Награды: 62


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

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



HTML

Код
<!-- radio button area -->
<div class="title">Radio Buttons</div>
<div class="mine">
  <label>
    <input type="radio" name="radioGroup">
    <span>Option 1 - mine</span>
  </label>
  <br>
  <label>
    <input type="radio" name="radioGroup" checked>
    <span>Option 2 - mine</span>
  </label>
</div>
<label>
  <input type="radio" name="radioGroup">
  Option 3 - unstyled
</label>

<!-- checkbox area -->
<div class="title">Checkboxes</div>
<div class="mine">
  <label>
    <input type="checkbox">
    <span>Option 1 - mine</span>
  </label>
  <br>
  <label>
    <input type="checkbox" checked>
    <span>Option 2 - mine</span>
  </label>
</div>
<label>
  <input type="checkbox">
  Option 3 - unstyled
</label>

CSS

Код
.mine input[type="radio"],
.mine input[type="checkbox"] {
  display:none;
}
.mine input[type="radio"] + span,
.mine input[type="checkbox"] + span {
  display:inline-block;
  position: relative;
  margin-left: 21px;
}
.mine input[type="radio"] + span:before,
.mine input[type="checkbox"] + span:before {
  content:'';
  position: absolute;
  width: 13px;
  height: 13px;
  background-color: #F5F5F6;
  left: -20px;
  top: 1px;
  border: 1px solid #C9CACB;
}
.mine input[type="radio"] + span:before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
}
.mine input[type="radio"]:checked + span:after,
.mine input[type="checkbox"]:checked + span:after {
  content:'';
  position: absolute;
  width: 9px;
  height: 9px;
  background-color: #F47839;
  left: -18px;
  top: 3px;
  border: 1px solid #C9CACB;
}
.mine input[type="radio"]:checked + span:after {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
}

body { padding: 25px; }
.title {
  font-size: 125%;
  padding: 20px;
}

На этом установка завершена!

Демонстрация
Прикрепления: 0370929.png(10.9 Kb) · style-radio-but.zip(3.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты HTML для сайта » Стилизация радиокнопок и чекбоксов на CSS (Стильная стилистика радио кнопки и флажки с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: