Блог

css Кастомный input checkbox
16 марта 2024 г.

Кастомный input checkbox

html css

HTML - код выглядит следующим образом.

HTML

<div class="checkbox">
  <label class="control">
    <input type="checkbox" name="checkbox" checked="checked">
    <div class="control_indicator"></div>
    Checked
  </label>
  <label class="control">
    <input type="checkbox" name="checkbox">
    <div class="control_indicator"></div>
    No checked
  </label>
  <label class="control">
    <input type="checkbox" name="checkbox">
    <div class="control_indicator"></div>
    No checked
  </label>
  <label class="control">
    <input type="checkbox" name="checkbox" disabled="disabled">
    <div class="control_indicator"></div>
    Disabled
  </label>
</div>

О чем этот код?

checkbox - общий контейнер для input checkbox;
label class="control" - контейнер для input и всего содержимого. Важно чтобы тег был <label>, иначе клик не сработает;
input type="checkbox" - сам input для передачи состояния, но сам по себе он скрыт;
control_indicator - блок для отрисовки input checkbox и нужных состояний;
Checked - любой текст.

SCSS

$gray: #ccc;

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox {
  
  .control {
    font: 20px/20px 'Verdana';
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;

    input {
      position: absolute;
      z-index: -1;
      opacity: 0;

      &:checked {

        & ~ .control_indicator {
          border-color: $gray;

          &:after {
            display: block;
          }
        }
      }

      &:disabled {

        & ~ .control_indicator {
          background: transparent;
          opacity: .4;
          pointer-events: none;

          &:after {
            background: transparent;
          }
        }
      }
    }

    &_indicator {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      position: relative;
      margin-right: 12px;
      border: 2px solid $gray;

      &:after {
        box-sizing: unset;
        content: '';
        position: absolute;
        display: none;
        left: 4px;
        top: 4px;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: $gray;
      }
    }

    &:hover {

      .control_indicator {

        &:after {
          display: block;
        }
      }
    }
  }
}

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