Border/Outline of Input type Checkbox not updating properly-CodePudding

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.

CodePudding user response：

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 >
  <input  type="checkbox">
  <span >A checkbox</span>
</label>

CodePudding user response：

you can

::after 
::before

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