CSS custom style checkbox: Make the checkmark appear and (remove the focus styling)

Question

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

Answer 1

1. A checkmark doesn't appear

   This doesn't appear because you have added appearance: none which explicitly removed this. We can add this checkmark back using the :checked, ::before and ::after selectors, and adding widths, heights, and rotations. Something like this should fix it (you may need to tweak it a little to your requirements)

   .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; 
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

2. I would also like a very thin border of a different color than the default border.

   Simple - just add border: 2px solid #efefef, just replace that sample colour with your wanted colour

   .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; 
       border: 1px solid #efefef;
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

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

   Don't. People use it to navigate with a keyboard, so when it is removed then they get annoyed and confused.

   If you must, then just add outline: none; to the :focus styles. But don't do it!

   .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; 
       border: 1px solid #efefef;
   }
   .checkbox:focus {
       outline: none; /* please don't do it! */
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

I think we are done! Here's our full code:

.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; 
    border: 1px solid #efefef;
}
.checkbox:focus {
    outline: none; /* please don't do it! */
}
.checkbox:checked::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    width: 23px;
    height: 2px;
    background: #222;
    transform: rotate(-45deg);
}
.checkbox:checked::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 2px;
    width: 7px;
    height: 2px;
    background: #222;
    transform: rotate(45deg);
}

<input type="checkbox" class="checkbox"/>