How to remove checkbox border in css

Question

How to remove checkbox border and background color using CSS?

label input[id="cb1"] {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
}

label input[id="cb1"]:checked:after {
  border: none;
}

<label for="cb1"><input type="checkbox" id="cb1"></label>

Demo: https://stackblitz.com/edit/angular-ivy-qq69mq?file=src%2Fapp%2Fapp.component.css

Does this answer your question? [How to change checkbox's border style in CSS?](https://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css) — Jens, Aug 06 '23 at 17:45

Gyanendra Giri · Answer 1 · 2023-08-07T18:34:23.630

Use following CSS. It will remove checkbox background and border.

label input[id='cb1'] {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
}
label input[id='cb1']:checked:after {
  border: none; 
  background-color: #ffffff;
  content: '\2714';
  position: absolute;
}

<label for="cb1"><input type="checkbox" id="cb1"></label>

Source: Change Checkbox background color when checked

How to remove checkbox border in css

1 Answers1