Skip to main content

Стилизация форм

Стилизация чекбоксов и радио-кнопок​

<!--1. Связываем чекбокс с лейблом через id-->
<div class="form-group">
  <input type="checkbox" name="remember-me" id="remember-me-id">
  <label for="remember-me-id">Запомни меня</label>
</div>
/* 2. Скрываем системный чекбокс */
.form-group input[type="checkbox"] {
  display: none;
}

/* 3. Готовим поле для псевдоэлемента лейбла */
.form-group input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding-left: 32px;
}

/* 4. Лейбл при наведении */
.form-group input[type="checkbox"] + label:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* 5. Стилизуем лейбл под чекбокс на поз. псевдоэлементе */
.form-group input[type="checkbox"] + label::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  border: 2px solid #000;
  left: -2px;
}

/* 6. Крестик появляется, если лейбл отмечен */
.form-group input[type="checkbox"]:checked + label::before {
  background: url(../img/icon-checkbox.png) no-repeat 50%;
}

Стилизация состояний​

input[type="checkbox"]:checked, 
input[type="checkbox"]:enabled, 
input[type="checkbox"]:disabled {
  /* Стилизация состояний */
}

Стилизация инпутов/селектов​

Placeholder​

// инпут в фокусе (набираемый текст)
input:focus { color: red; }

// Набранный текст (вне фокуса)
input { color: black; }

// инпут не в фокусе (ОТОБРАЖАЕТСЯ ЗНАЧЕНИЕ АТРИБУТА placeholder)
input:placeholder { color: gray; }

// инпут вне фокуса (С НАБРАННЫМ ТЕКСТОМ)
input[placeholder] { color: blue; }