html - CSS Checkbox styling - size color change

Question

I am trying to do simple checkbox styling. The color change is not working.

How to change the color and border?

    input[type=checkbox]{
      height: 25px;
      width: 25px;
      background-color: #eee;
      }
    
    input[type=checkbox]:checked {
        background-color: #3ee738;
      }

    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
    <p>
    
    

question from:https://stackoverflow.com/questions/65516976/css-checkbox-styling-size-color-change

Answer 1

    input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "2714";
  border: 0.1em solid MediumSeaGreen;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

    <p>
    <input type="checkbox" id="showall" name="showall" value=0>&nbsp;
    <label for="showall">Show All</label>
    </p>
    <p>
    <input type="checkbox" id="showfl" name="showfl" value=0>&nbsp;
    <label for="showfl">Filtered</label>
    </p>
    <p>