Border/Outline of Input type Checkbox not updating properly

Question

So I am trying to create a checkbox that looks like this:

And my checkbox currently looks like this:

This is the code for my Custom Checkbox:

const CustomCheckBox = ({ name = "" }) => {
  return (
    <input
      type="checkbox"
      name={name}
      style={{
        cursor: "pointer",
        width: "20px",
        height: "20px",
      }}
    />
  );
};

I tried using border:"1px solid #9e9e9e", borderRadius:"3px" but this changed nothing. So I tried using outline: "1px solid #9e9e9e" but now the checkbox looks like 4 dots connected and the border does not have a radius

How can I make the Outline/border wider without it overlapping like it is doing at the moment?

I saw someone suggested using box-shadow as a workaround in a similar question but I got the same result.

I tried using border:"none" to hide the inner border but it also did not work.

Answer 1

I would argue against using a visual part of the checkbox and, instead, recreating it with CSS. Regular HTML checkbox is too tightly coupled with browser/OS styles, if you recreate it with CSS you can do whatever you wish with it. You can do it like this:

 .checkbox__input{ /* hiding the checkbox but so it will still be visible for screan readers */ position: absolute; left: -10000em; }.checkbox__text{ display: flex; cursor: pointer; }.checkbox__text::before{ content: ""; display: block; width: 1em; height: 1em; margin-right: .5em; border: 2px solid; border-radius: 3px; }.checkbox__input:checked +.checkbox__text::before { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0.5em #000; } /* add styles for hover/active/focus/anything else */

 <label class="checkbox"> <input class="checkbox__input" type="checkbox"> <span class="checkbox__text">A checkbox</span> </label>

Answer 2

you can

::after 
::before

This is can be Help you and design it according to check box.