стиль флажка и фон

Question

Можно ли стилизовать флажок таким образом и изменить его фон!

попробовал тень и контур

лучшее, что у меня есть, - это метод: before, но все еще нет закрыть

here what I have tried

CSS

.table__check-box {
    background-color: red;
    position: relative;
    height: 1.75rem;
    width: 1.75rem;
    margin-right: 2.3rem;
    margin-top: 1rem;
}

.table__check-box--inactive {
    background-color: #a4a9ae;
}

.table__check-box:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 5px;
    border: 2px solid #ccc;
}

HTML

Answer 1

У w3schools есть хороший пост по этому поводу.

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

<label class="checkbox-container">
  <input type="checkbox" checked="checked">
  <span class="checkbox-state"></span>
</label>

<label class="checkbox-container">
  <input type="checkbox">
  <span class="checkbox-state"></span>
</label>

<label class="checkbox-container">
  <input type="checkbox">
  <span class="checkbox-state"></span>
</label>

 /* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Style the checkbox */
.checkbox-container input ~ .checkbox-state {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  width: 20px;
  height: 20px;
}

/* Style the checkbox */
.checkbox-container input:checked ~ .checkbox-state {
  background-color: #ccc;
}

Рабочая скрипка: https://jsfiddle.net/zano29jd/

Answer 2

Элемент ввода не имеет содержимого, поэтому :before быть не должно. Лучше использовать table__check-box + label:before:

* {
  box-sizing: border-box;
}

.table__check-box {
  opacity: .3;// Just for display
  // Uncomment:
  // display: none;
}

.table__check-box + label {
    background-color: red;
    display: inline-block;
    position: relative;
    height: 1.75rem;
    width: 1.75rem;
    margin-right: 2.3rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 5px;
    border: 2px solid #ccc;
}

.table__check-box:not(:checked) + label {
    background-color: #a4a9ae;
}

<div class="input-wrapper">
  <input id="active-checkbox" class="table__check-box" type="checkbox"/>
  <label for="active-checkbox"></label>
</div>