Как сделать checkbox с 3 вариантами, как на картинке?

Question

Как сделать подобный checkbox? Как правильно погуглить? Есть ли готовые решения? Нужен чистый css + html

Answer 1

Мой вариант (впервые такое делаю, было интересно).

.radio-wrap
{
  display: inline-flex;
  border-radius: 25px;
  background-color: #F1F0F4;
  box-shadow: 0px -2px 5px 0px rgb(144 146 153 / 60%);
}


.radio-label > span
{
  display: inline-flex;
  padding: 10px 20px;
  user-select: none;
  color: #C7C9CF;
}

.radio-label > input
{
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.radio-label > input:checked + span
{
  color: #FB7E39;
  background-color: #FFFFFF;
  border-radius: 25px;
  box-shadow: 2px 2px 4px 0px rgb(199 201 207 / 60%);
}

<div class="radio-wrap">
  <label class="radio-label">
    <input type="radio" name="sort" value="category">
    <span>Category</span>
  </label>
  
  <label class="radio-label">
    <input type="radio" name="sort" value="period" checked>
    <span>Period</span>
  </label>
  
  <label class="radio-label">
    <input type="radio" name="sort" value="alphabet">
    <span>Alphabet</span>
  </label>
</div>

БЛОГ НА HUSL

Как сделать checkbox с 3 вариантами, как на картинке?

Ответы (1 шт):