How to style my checkbox and radio buttons

1

I’ve been wondering for a long time how to style checkboxes and radios.

I’ve tried using the type attribute styler in css to style them…

[type='checkbox']{
background:red;
border-radius:0px;
}

…but I have not been able to change their appearance.

Please kindly teach me how to style them.

Thanks.

2 
.thing {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:        none;
}

That will remove the platform styling. Note that you must use prefixed properties.. You may also need to remove outline (outline: none). You can then apply styling, to a degree. Those elements are not designed to be restyled how they appear in each specific browser. Careful removing the platform styling though, because it’s how people generally expect things to look and behave like.

There is also a common hack where you take advantage of the fact that interacting with a connected <label> element causes the input to be triggered. You can then hide the checkbox, and style the label however you want, making it look like a checkbox or whatever.

Here’s a basic example with radio buttons:

2 Likes
3

I had just learned how to style checkbox buttons and now am trying to put my new skill to use. I’ve made this pen:

…and was expecting the checkbox to look something like this:

Checkbox1

…but got something like this:

Checkbox2

It seems like the border got sliced in half and put on two different lines. Can you please tell me what i am possibly doing wrong? What’s happening here?

Thanks.

4

@ConnerOw1115 Hi Bro, it works better if the div surrounds the label and checkbox.

<div>
  <input type="checkbox" name="check" id="check"/>
  <label for="check"></label>
</div>
1 Like
5

Thanks. Works much better.

1 Like