0

I need a checkbox with background color white and without curve

enter image description here

I tried

.cb {
  background-color: white;
  border: 1px;
}
<input type="checkbox" class="cb">Normal
<input type="checkbox" class="cb">power
<input type="checkbox" class="cb">Admin

but i cant get the defualt checkbox only is it possible do like above image

Pugazh
  • 9,453
  • 5
  • 33
  • 54
Sherin AS
  • 35
  • 1
  • 1
  • 3

2 Answers2

3

You would need to hide the default checkbox rendered by browsers and show a custom checkbox.

Below is an simple example using :before pseudo element.

.cb {
  display: none;
}
label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}
<input type="checkbox" class="cb" id="check1">
<label for="check1">Normal</label>
<br>
<input type="checkbox" class="cb" id="check2">
<label for="check2">Power</label>
<br>
<input type="checkbox" class="cb" id="check3">
<label for="check3">Admin</label>
Pugazh
  • 9,453
  • 5
  • 33
  • 54
2

Try to configure your style with CSS Checkbox. I think you'll get your most personal checkbox style there as you can decide what styles your checkboxes will have.

Sample image will be shown here.

Chandresh Khambhayata
  • 1,748
  • 2
  • 31
  • 60
emmics
  • 994
  • 1
  • 11
  • 29
  • Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Sep 27 '16 at 10:16
  • You're both right, sorry. I added a explanatory note and a screenshot but the requester should do his styling by himself to fulfill all of his whishes, if you understand what I mean. – emmics Sep 27 '16 at 11:04