Как реализовать выпуклый border у checkbox?

Question

как реализовать выпуклый эффект бордер у checkbox? Пробовал тенями, но получается не так, как на картинке

.check-radio {
    display: flex;
    position: relative;
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.check-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.check_checkmark {
    position: relative;
    /*top: 0;
    left: 0;
    z-index: -1;*/
    height: 25px;
    width: 25px;
    border-radius: 3px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: var(--color-white-back);
    box-shadow: inset 2px 2px 1px rgba(204, 204, 207, 0.45),
    inset -2px -2px 2px #ffffff,
    -1px -1px 1px 0 rgba(255, 255, 255, .5),
    1px 1px 1px 0 rgba(0, 0, 0, .02);
}

.check_checkmark:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to right bottom, #FFFFFF, #e2e2e4);
    /*box-shadow: inset -1px -1px 1px 0 rgba(255, 255, 255, .5),
    inset 1px 1px 1px 0 rgba(0, 0, 0, .02);*/
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <label class="check-radio">
      <input type="radio" name="radio">
      <span class="check_checkmark"></span>
    </label>
  </body>
</html>

Answer 1

Постарался максимально приблизить к оригиналу:

body {
  --color-white-back: #f0f0f3;
  margin: 0; display: grid;
  place-items: center; min-height: 100vh;
  background-color: var(--color-white-back);
}

.check-radio {
  position: relative;
  display: flex;
  height: 1.5625em; width: 1.5625em;
  font-size: 96px; /* Масштаб. По умолчанию = 16px */
  cursor: pointer;
}

.check-radio input {
  position: absolute;
  margin: 0;
  height: 0;
}

.check_checkmark {
  position: relative;
  height: 1.5625em; width: 1.5625em;
  border: 0.0625em solid var(--color-white-back);
  border-radius: 0.25em;
  box-sizing: border-box;
  background-color: var(--color-white-back);
  box-shadow: inset -0.125em -0.125em 0.3125em #fff, inset 0.125em 0.125em 0.375em -0.1875em #0003, -0.0625em -0.0625em 0.1875em 0.0625em #fff, 0 0 0.1875em 0 #0005;
}

input+.check_checkmark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  height: 0.375em; width: 0.75em;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  border: 0.1875em solid #f9742b;
  border-top: none; border-right: none;
  filter: drop-shadow(0 0.125em 0.0625em #f9742b44);
  transition: transform 0.2s ease-in;
}

input:checked+.check_checkmark::after {
  transform: translate(-50%, -66%) rotate(-45deg) scale(1);
  transition: transform 0.5s cubic-bezier(0.4, 0.15, 0.35, 1.45);
}

<label class="check-radio">
  <input type="checkbox" name="checkbox">
  <span class="check_checkmark"></span>
</label>

БЛОГ НА HUSL

Как реализовать выпуклый border у checkbox?

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