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

score 2 · Accepted Answer · answered Nov 12 '20 at 20:20

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"/>

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"/>

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"/>

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

1 Answers1