Revisions to How to style a checkbox using CSS

Make external links online, change size, improve

edit approved Jul 1, 2023 at 0:09

user14264568

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http"https://imghi.usibb.co/uncheckmG7QRYw/62a9b364a056b98f7e02705a-checkboxunselected.pngpng"); width: 49px;24px; height: 49px;24px; display: inline-block; vertical-align: middle; background-size: 100%; } input[type="checkbox"]:checked + label span { background: url(httphttps://imghsvgur.uscom/check_2i/upi.pngsvg); width: 49px;24px; height: 49px;24px; vertical-align: middle; background-size: 100%; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is a JSFiddle link

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is a JSFiddle link

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url("https://i.ibb.co/mG7QRYw/62a9b364a056b98f7e02705a-checkboxunselected.png"); width: 24px; height: 24px; display: inline-block; vertical-align: middle; background-size: 100%; } input[type="checkbox"]:checked + label span { background: url(https://svgur.com/i/upi.svg); width: 24px; height: 24px; vertical-align: middle; background-size: 100%; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is a JSFiddle link

deleted 4 characters in body

Source Link

edited Sep 13, 2021 at 14:39

TylerH

21.3k
84
84
121

No JavaScript or jQuery required.

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is JsFiddlea JSFiddle link

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is JsFiddle link

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is a JSFiddle link

snippet for more organized page looking

Source Link

edited Dec 29, 2019 at 19:04

Shiny

5.1k
3
19
33

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is JsFiddle link: enterHere is JsFiddle link description here

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is JsFiddle link: enter link description here

No JavaScript or jQuery required.

Change your checkbox style simple way.

input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; }

<input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>

Here is JsFiddle link

snippet for more organized page looking

Source Link

edit approved Dec 29, 2019 at 19:04

kakashi senpai

165
11

Loading

Active reading [<https://en.wikipedia.org/wiki/JQuery>].

Source Link

edited Jul 17, 2019 at 22:38

Peter Mortensen

31.4k
22
110
134

Loading

Added syntax highlighting for CSS, improved formatting.

Source Link

edited Apr 26, 2018 at 14:31

Vadim Ovchinnikov

14.1k
7
68
95

Loading

Source Link

answered Apr 6, 2016 at 10:46

Cherish

310
1
7

Loading

Collectives™ on Stack Overflow

Return to Answer