Revisions to How to style a checkbox using CSS

Expanded, etc.

edited Jul 17, 2019 at 17:47

31.4k
22
110
134

There is a way to do this using just CSS. We can (ab)use the label element and style that element instead. The caveat is that this will not work for IE8Internet Explorer 8 and lower versions.

.myCheckbox input { position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test" /> <span></span> </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

.myCheckbox input { position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test" /> <span></span> </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that element instead. The caveat is that this will not work for Internet Explorer 8 and lower versions.

.myCheckbox input { position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test" /> <span></span> </label>

Fixed formatting and added Snippet

Source Link

edited Jul 16, 2019 at 18:01

Tobias Tengler

7.5k
4
26
35

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

 .myCheckbox input { // display: none; // Better than display: none for accessibility reasons   position: relative;   z-index: -9999;  }  .myCheckbox span {   width: 20px;   height: 20px;   display: block;   background: url("link_to_image");  }  .myCheckbox input:checked + span {   background: url("link_to_another_image");  }

 <label for="test">Label for my styled "checkbox"</label>  <label class="myCheckbox">   <input type="checkbox" name="test" />   <span></span>  </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

 .myCheckbox input { // display: none; // Better than display: none for accessibility reasons   position: relative;   z-index: -9999;  }  .myCheckbox span {   width: 20px;   height: 20px;   display: block;   background: url("link_to_image");  }  .myCheckbox input:checked + span {   background: url("link_to_another_image");  }

 <label for="test">Label for my styled "checkbox"</label>  <label class="myCheckbox">   <input type="checkbox" name="test"/>   <span></span>  </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

.myCheckbox input { position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test" /> <span></span> </label>

add snippet.

Source Link

edit approved Jul 16, 2019 at 18:01

Llazar

3.3k
3
20
28

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

CSS:

.myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

HTML:

 .myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

 <label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

CSS:

.myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

HTML:

<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>

There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.

 .myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); }

 <label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>

Rollback to Revision 3 - Edit approval overridden by post owner or moderator

Source Link

edited Sep 24, 2018 at 13:13

Blake Pettersson

9.1k
3
29
36

Loading

My edit show preview in stackoverflow

Source Link

edit approved Sep 21, 2018 at 14:40

khalidh

893
2
14
35

Loading

Added syntax highlighting for CSS, improved formatting.

Source Link

edited Apr 26, 2018 at 14:43

Vadim Ovchinnikov

14.1k
7
68
95

Loading

added 121 characters in body

Source Link

edited May 26, 2016 at 18:28

Blake Pettersson

9.1k
3
29
36

Loading

Source Link

answered Aug 30, 2012 at 8:59

Blake Pettersson

9.1k
3
29
36

Loading

Collectives™ on Stack Overflow

Return to Answer