Revisions to How to style a checkbox using CSS

added space before the "I"

edited Nov 24, 2020 at 4:15

25k
23
128
220

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox">Itype="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox">I Agree To Terms &amp; Conditions</label> </form>

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus { outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; cursor: pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color: #409fd6; background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

Fixed the indentation, etc.

Source Link

edited Jul 17, 2019 at 22:46

Peter Mortensen

31.4k
22
110
134

With pure CSS, nothing fancy with :before:before and :after:after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus {  outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] {  background-color: #DDD;  border-radius: 2px;  appearance: none;  -webkit-appearance: none;  -moz-appearance: none;  width: 17px;  height: 17px;  cursor: pointer;  position: relative;  top: 5px; } INPUT[type=checkbox]:checked {  background-color: #409fd6;  background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox"> Itype="checkbox">I Agree To Terms &amp; Conditions</label> </form>

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus { outline:1px solid rgba(0,0,0,0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance:none; -webkit-appearance:none; -moz-appearance:none; width: 17px; height: 17px; cursor:pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color:#409fd6; background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus {  outline: 1px solid rgba(0, 0, 0, 0.2); } INPUT[type=checkbox] {  background-color: #DDD;  border-radius: 2px;  appearance: none;  -webkit-appearance: none;  -moz-appearance: none;  width: 17px;  height: 17px;  cursor: pointer;  position: relative;  top: 5px; } INPUT[type=checkbox]:checked {  background-color: #409fd6;  background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox">I Agree To Terms &amp; Conditions</label> </form>

Source Link

answered Jun 2, 2019 at 2:13

Volomike

25k
23
128
220

With pure CSS, nothing fancy with :before and :after, no transforms, you can turn off the default appearance and then style it with an inline background image like the following example. This works in Chrome, Firefox, Safari, and now Edge (Chromium Edge).

INPUT[type=checkbox]:focus { outline:1px solid rgba(0,0,0,0.2); } INPUT[type=checkbox] { background-color: #DDD; border-radius: 2px; appearance:none; -webkit-appearance:none; -moz-appearance:none; width: 17px; height: 17px; cursor:pointer; position: relative; top: 5px; } INPUT[type=checkbox]:checked { background-color:#409fd6; background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat; }

<form> <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label> </form>

Collectives™ on Stack Overflow

Return to Answer