0
.checkbox__container { 
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;

  & input[type="checkbox"] { 
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    accent-color: red;
    background-color: red;
    border: 1px solid #575352;
    border-radius: 1px;
    flex: none;
    order: 0;
    flex-grow: 0;

    &:hover { 
      background-color: red; 
      accent-color: red;
      border: 1px solid #575352;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;
    }

    &:checked { 
      accent-color: #0A8276;
      border-radius: 1px;
      flex: none;
      order: 0;
      flex-grow: 0;

      &:hover { 
        accent-color: #08665C;
        border-radius: 1px;
        flex: none;
        order: 0;
        flex-grow: 0;
      }
    }
  }
}

By default and on hover, the background color does not change, but if you click it, and you check it, then the checked background-color is the correct one, and on hover over the checked state, the background color also changes correctly as specified in the scss file.

Why does it not work for the default non-checked state?

happy_story
  • 1
  • 1
  • 7
  • 17
  • 2
    Changing checkbox's background can be [quite tricky](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css?answertab=scoredesc#tab-top), I would recommend you create a custom checkbox instead of using an input tag – l -_- l May 05 '23 at 13:32

1 Answers1

0

It is not possible to fully change the CSS for default HTML form controls. Only some properties can be changed, such as background colors and borders for text inputs. For full control over the styling of your checkboxes (and other entries), you need to create custom checkboxes/entries.

Source: Custom Checkboxes

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
Al John
  • 612
  • 5
  • 24