CSS custom style checkbox: Make the checkmark appear and removing the focus styling

I'm styling a checkbox using a style I found on this answer

.checkbox{
    width: 25px;
    height: 25px;
    background: map-get($map: $gray, $key: 2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: map-get($map: $gray, $key: 3);
    position: relative;
    left: -5px;
    top: -5px;
    cursor: pointer;
}

With this styling though, a checkmark doesn't appear when I select a box. I would also like a very thin border of a different color than the default border.

I would also like to remove this outline that appears when the checkbox is focused

I am trying to get the checkbox to look like this

---

Adding the following style didn't help

.checkbox:focus{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

---

Note: The shadow is from another class