I try to style checkbox background color, but it won't change whatever I do. I am using firefox 29 latest.
Is there some rule changes in css or may be in the browser?
CSS:
input[type="checkbox"] {
background: #990000;
}
.chk {
background-color: #990000;
}
Here is a demo http://jsfiddle.net/6KXRg/
One line of CSS is enough using hue-rotate filter
. You can change their sizes with transform: scale()
as well.
.checkbox { filter: hue-rotate(0deg) }
.c1 { filter: hue-rotate(0deg) }
.c2 { filter: hue-rotate(30deg) }
.c3 { filter: hue-rotate(60deg) }
.c4 { filter: hue-rotate(90deg) }
.c5 { filter: hue-rotate(120deg) }
.c6 { filter: hue-rotate(150deg) }
.c7 { filter: hue-rotate(180deg) }
.c8 { filter: hue-rotate(210deg) }
.c9 { filter: hue-rotate(240deg) }
input[type=checkbox] {
transform: scale(2);
margin: 10px;
cursor: pointer;
}
/* Prevent cursor being `text` between checkboxes */
body { cursor: default }
_x000D_
<input type="checkbox" class="c1" />
<input type="checkbox" class="c2" />
<input type="checkbox" class="c3" />
<input type="checkbox" class="c4" />
<input type="checkbox" class="c5" />
<input type="checkbox" class="c6" />
<input type="checkbox" class="c7" />
<input type="checkbox" class="c8" />
<input type="checkbox" class="c9" />
_x000D_
I also had this problem. I use chrome to code because I'm currently a newbie. I was able to change the colour of the checkboxes and radio selectors when they were checked ONLY using CSS. The current degree that is set in the hue-rotate() turns the blue checks red. I first used the grayscale(1) with the filter: but you don't need it. However, if you just want plain flat gray, go for the grayscale value for filter.
I've ONLY tested this in Chrome but it works with just plain old HTML and CSS, let me know in the comments section if it works in other browsers.
input[type="checkbox"],
input[type="radio"] {
filter: hue-rotate(140deg);
}
_x000D_
<body>
<label for="radio1">Eau de Toilette</label>
<input type="radio" id="radio1" name="example1"><br>
<label for="radio2">Eau de Parfum</label>
<input type="radio" id="radio2" name="example1"><br>
<label for="check1">Orange Zest</label>
<input type="checkbox" id="check1" name="example2"><br>
<label for="check2">Lemons</label>
<input type="checkbox" id="check2" name="example2"><br>
</body>
_x000D_
you cant change the background of checkbox but some how you can do a trick try this :)
.divBox {_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
background: #ddd;_x000D_
margin: 20px 90px;_x000D_
position: relative;_x000D_
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);_x000D_
}_x000D_
_x000D_
.divBox label {_x000D_
display: block;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
-webkit-transition: all .5s ease;_x000D_
-moz-transition: all .5s ease;_x000D_
-o-transition: all .5s ease;_x000D_
-ms-transition: all .5s ease;_x000D_
transition: all .5s ease;_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
top: 1px;_x000D_
z-index: 1;_x000D_
/* _x000D_
use this background transparent to check the value of checkbox _x000D_
background: transparent;_x000D_
*/_x000D_
background: Black;_x000D_
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);_x000D_
}_x000D_
_x000D_
.divBox input[type=checkbox]:checked + label {_x000D_
background: green;_x000D_
}
_x000D_
<div class="divBox">_x000D_
<input type="checkbox" value="1" id="checkboxFourInput"name="" />_x000D_
<label for="checkboxFourInput"></label>_x000D_
</div>
_x000D_
Yes, you can. Based on knowledge from colleagues here and researching on web, here you have the best solution for styling a checkbox without any third-party plugin:
input[type='checkbox']{
width: 14px !important;
height: 14px !important;
margin: 5px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
outline: 1px solid gray;
box-shadow: none;
font-size: 0.8em;
text-align: center;
line-height: 1em;
background: red;
}
input[type='checkbox']:checked:after {
content: '?';
color: white;
}
_x000D_
<input type='checkbox'>
_x000D_
Late but as a note: after upgrading Chrome to v/81, all check boxes & radio buttons turned blue. So here is a dead simple solution if you ain't okay with blue but with grayscale;
input[type='checkbox'], input[type='radio'] { filter: grayscale(1) }
See more on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale
Styling the arrow & the checkbox colors.
I haven't seen any answer deal with the arrow colors, so I thought I might add this for those wanting to also style the arrow inside the checkbox. I'm not suggesting to do these things, it's just for demo purposes.
.checkbox-label {
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom {
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
_x000D_
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>
_x000D_
Agree with iLoveTux , applying too many things (many colors and backgrounds) nothing worked , but here's what started working, Apply these properties to its css:
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
and then css styling started working on checkbox :)
Can be very simplified like that :
input[type="checkbox"]{
outline:2px solid red;
outline-offset: -2px;
}
Works without any plugin :)
Technically, it is possible to change the color of anything with CSS. As mentioned, you can't change the background-color or color but you can use CSS filters. For example:
input[type="checkbox"] { /* change "blue" browser chrome to yellow */
filter: invert(100%) hue-rotate(18deg) brightness(1.7);
}
If you are really looking for design control over checkboxes though, your best bet is to do the "hidden" checkbox and style an adjacent element such as a div.
Although the question is answered and is older, In exploring some options to overcome the the styling of check boxes issue I encountered this awesome set of CSS3 only styling of check boxes and radio buttons controlling background colors and other appearances. Thought this might be right up the alley of this question.
body {_x000D_
background: #555;_x000D_
}_x000D_
_x000D_
h1 {_x000D_
color: #eee;_x000D_
font: 30px Arial, sans-serif;_x000D_
-webkit-font-smoothing: antialiased;_x000D_
text-shadow: 0px 1px black;_x000D_
text-align: center;_x000D_
margin-bottom: 50px;_x000D_
}_x000D_
_x000D_
input[type=checkbox] {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
/* SLIDE ONE */_x000D_
.slideOne {_x000D_
width: 50px;_x000D_
height: 10px;_x000D_
background: #333;_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
position: relative;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
}_x000D_
_x000D_
.slideOne label {_x000D_
display: block;_x000D_
width: 16px;_x000D_
height: 16px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
_x000D_
-webkit-transition: all .4s ease;_x000D_
-moz-transition: all .4s ease;_x000D_
-o-transition: all .4s ease;_x000D_
-ms-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
top: -3px;_x000D_
left: -3px;_x000D_
_x000D_
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
}_x000D_
_x000D_
.slideOne input[type=checkbox]:checked + label {_x000D_
left: 37px;_x000D_
}_x000D_
_x000D_
/* SLIDE TWO */_x000D_
.slideTwo {_x000D_
width: 80px;_x000D_
height: 30px;_x000D_
background: #333;_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
position: relative;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
}_x000D_
_x000D_
.slideTwo:after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 14px;_x000D_
left: 14px;_x000D_
height: 2px;_x000D_
width: 52px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
background: #111;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
}_x000D_
_x000D_
.slideTwo label {_x000D_
display: block;_x000D_
width: 22px;_x000D_
height: 22px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
_x000D_
-webkit-transition: all .4s ease;_x000D_
-moz-transition: all .4s ease;_x000D_
-o-transition: all .4s ease;_x000D_
-ms-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
top: 4px;_x000D_
z-index: 1;_x000D_
left: 4px;_x000D_
_x000D_
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
}_x000D_
_x000D_
.slideTwo label:after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 10px;_x000D_
height: 10px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
background: #333;_x000D_
left: 6px;_x000D_
top: 6px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,1), 0px 1px 0px rgba(255,255,255,0.9);_x000D_
}_x000D_
_x000D_
.slideTwo input[type=checkbox]:checked + label {_x000D_
left: 54px;_x000D_
}_x000D_
_x000D_
.slideTwo input[type=checkbox]:checked + label:after {_x000D_
background: #00bf00;_x000D_
}_x000D_
_x000D_
/* SLIDE THREE */_x000D_
.slideThree {_x000D_
width: 80px;_x000D_
height: 26px;_x000D_
background: #333;_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
position: relative;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);_x000D_
}_x000D_
_x000D_
.slideThree:after {_x000D_
content: 'OFF';_x000D_
font: 12px/26px Arial, sans-serif;_x000D_
color: #000;_x000D_
position: absolute;_x000D_
right: 10px;_x000D_
z-index: 0;_x000D_
font-weight: bold;_x000D_
text-shadow: 1px 1px 0px rgba(255,255,255,.15);_x000D_
}_x000D_
_x000D_
.slideThree:before {_x000D_
content: 'ON';_x000D_
font: 12px/26px Arial, sans-serif;_x000D_
color: #00bf00;_x000D_
position: absolute;_x000D_
left: 10px;_x000D_
z-index: 0;_x000D_
font-weight: bold;_x000D_
}_x000D_
_x000D_
.slideThree label {_x000D_
display: block;_x000D_
width: 34px;_x000D_
height: 20px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
_x000D_
-webkit-transition: all .4s ease;_x000D_
-moz-transition: all .4s ease;_x000D_
-o-transition: all .4s ease;_x000D_
-ms-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
top: 3px;_x000D_
left: 3px;_x000D_
z-index: 1;_x000D_
_x000D_
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
}_x000D_
_x000D_
.slideThree input[type=checkbox]:checked + label {_x000D_
left: 43px;_x000D_
}_x000D_
_x000D_
/* ROUNDED ONE */_x000D_
.roundedOne {_x000D_
width: 28px;_x000D_
height: 28px;_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.roundedOne label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
left: 4px;_x000D_
top: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
_x000D_
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -o-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: linear-gradient(top, #222 0%, #45484d 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );_x000D_
}_x000D_
_x000D_
.roundedOne label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 16px;_x000D_
height: 16px;_x000D_
background: #00bf00;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
top: 2px;_x000D_
left: 2px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
}_x000D_
_x000D_
.roundedOne label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.3;_x000D_
}_x000D_
_x000D_
.roundedOne input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
/* ROUNDED TWO */_x000D_
.roundedTwo {_x000D_
width: 28px;_x000D_
height: 28px;_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.roundedTwo label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
_x000D_
-webkit-border-radius: 50px;_x000D_
-moz-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
left: 4px;_x000D_
top: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
_x000D_
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -o-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: linear-gradient(top, #222 0%, #45484d 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );_x000D_
}_x000D_
_x000D_
.roundedTwo label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 9px;_x000D_
height: 5px;_x000D_
background: transparent;_x000D_
top: 5px;_x000D_
left: 4px;_x000D_
border: 3px solid #fcfff4;_x000D_
border-top: none;_x000D_
border-right: none;_x000D_
_x000D_
-webkit-transform: rotate(-45deg);_x000D_
-moz-transform: rotate(-45deg);_x000D_
-o-transform: rotate(-45deg);_x000D_
-ms-transform: rotate(-45deg);_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
_x000D_
.roundedTwo label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.3;_x000D_
}_x000D_
_x000D_
.roundedTwo input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
/* SQUARED ONE */_x000D_
.squaredOne {_x000D_
width: 28px;_x000D_
height: 28px;_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
margin: 20px auto;_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.squaredOne label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
left: 4px;_x000D_
top: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
_x000D_
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -o-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: linear-gradient(top, #222 0%, #45484d 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );_x000D_
}_x000D_
_x000D_
.squaredOne label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 16px;_x000D_
height: 16px;_x000D_
background: #00bf00;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
background: linear-gradient(top, #00bf00 0%, #009400 100%);_x000D_
_x000D_
top: 2px;_x000D_
left: 2px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
}_x000D_
_x000D_
.squaredOne label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.3;_x000D_
}_x000D_
_x000D_
.squaredOne input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
/* SQUARED TWO */_x000D_
.squaredTwo {_x000D_
width: 28px;_x000D_
height: 28px;_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
margin: 20px auto;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.squaredTwo label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
left: 4px;_x000D_
top: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);_x000D_
_x000D_
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -o-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: linear-gradient(top, #222 0%, #45484d 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );_x000D_
}_x000D_
_x000D_
.squaredTwo label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 9px;_x000D_
height: 5px;_x000D_
background: transparent;_x000D_
top: 4px;_x000D_
left: 4px;_x000D_
border: 3px solid #fcfff4;_x000D_
border-top: none;_x000D_
border-right: none;_x000D_
_x000D_
-webkit-transform: rotate(-45deg);_x000D_
-moz-transform: rotate(-45deg);_x000D_
-o-transform: rotate(-45deg);_x000D_
-ms-transform: rotate(-45deg);_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
_x000D_
.squaredTwo label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.3;_x000D_
}_x000D_
_x000D_
.squaredTwo input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
_x000D_
/* SQUARED THREE */_x000D_
.squaredThree {_x000D_
width: 20px; _x000D_
margin: 20px auto;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.squaredThree label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
top: 0;_x000D_
border-radius: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);_x000D_
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);_x000D_
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);_x000D_
_x000D_
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -o-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);_x000D_
background: linear-gradient(top, #222 0%, #45484d 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );_x000D_
}_x000D_
_x000D_
.squaredThree label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 9px;_x000D_
height: 5px;_x000D_
background: transparent;_x000D_
top: 4px;_x000D_
left: 4px;_x000D_
border: 3px solid #fcfff4;_x000D_
border-top: none;_x000D_
border-right: none;_x000D_
_x000D_
-webkit-transform: rotate(-45deg);_x000D_
-moz-transform: rotate(-45deg);_x000D_
-o-transform: rotate(-45deg);_x000D_
-ms-transform: rotate(-45deg);_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
_x000D_
.squaredThree label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.3;_x000D_
}_x000D_
_x000D_
.squaredThree input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
/* SQUARED FOUR */_x000D_
.squaredFour {_x000D_
width: 20px; _x000D_
margin: 20px auto;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.squaredFour label {_x000D_
cursor: pointer;_x000D_
position: absolute;_x000D_
width: 20px;_x000D_
height: 20px;_x000D_
top: 0;_x000D_
border-radius: 4px;_x000D_
_x000D_
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);_x000D_
background: #fcfff4;_x000D_
_x000D_
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);_x000D_
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );_x000D_
}_x000D_
_x000D_
.squaredFour label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";_x000D_
filter: alpha(opacity=0);_x000D_
opacity: 0;_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 9px;_x000D_
height: 5px;_x000D_
background: transparent;_x000D_
top: 4px;_x000D_
left: 4px;_x000D_
border: 3px solid #333;_x000D_
border-top: none;_x000D_
border-right: none;_x000D_
_x000D_
-webkit-transform: rotate(-45deg);_x000D_
-moz-transform: rotate(-45deg);_x000D_
-o-transform: rotate(-45deg);_x000D_
-ms-transform: rotate(-45deg);_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
_x000D_
.squaredFour label:hover::after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";_x000D_
filter: alpha(opacity=30);_x000D_
opacity: 0.5;_x000D_
}_x000D_
_x000D_
.squaredFour input[type=checkbox]:checked + label:after {_x000D_
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";_x000D_
filter: alpha(opacity=100);_x000D_
opacity: 1;_x000D_
}
_x000D_
<h1>CSS3 Checkbox Styles</h1>_x000D_
_x000D_
<!-- Slide ONE -->_x000D_
<div class="slideOne"> _x000D_
<input type="checkbox" value="None" id="slideOne" name="check" />_x000D_
<label for="slideOne"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Slide TWO -->_x000D_
<div class="slideTwo"> _x000D_
<input type="checkbox" value="None" id="slideTwo" name="check" />_x000D_
<label for="slideTwo"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Slide THREE -->_x000D_
<div class="slideThree"> _x000D_
<input type="checkbox" value="None" id="slideThree" name="check" />_x000D_
<label for="slideThree"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Rounded ONE -->_x000D_
<div class="roundedOne">_x000D_
<input type="checkbox" value="None" id="roundedOne" name="check" />_x000D_
<label for="roundedOne"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Rounded TWO -->_x000D_
<div class="roundedTwo">_x000D_
<input type="checkbox" value="None" id="roundedTwo" name="check" />_x000D_
<label for="roundedTwo"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Squared ONE -->_x000D_
<div class="squaredOne">_x000D_
<input type="checkbox" value="None" id="squaredOne" name="check" />_x000D_
<label for="squaredOne"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Squared TWO -->_x000D_
<div class="squaredTwo">_x000D_
<input type="checkbox" value="None" id="squaredTwo" name="check" />_x000D_
<label for="squaredTwo"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Squared THREE -->_x000D_
<div class="squaredThree">_x000D_
<input type="checkbox" value="None" id="squaredThree" name="check" />_x000D_
<label for="squaredThree"></label>_x000D_
</div>_x000D_
_x000D_
<!-- Squared FOUR -->_x000D_
<div class="squaredFour">_x000D_
<input type="checkbox" value="None" id="squaredFour" name="check" />_x000D_
<label for="squaredFour"></label>_x000D_
</div>
_x000D_
Transparency maybe: checkbox inside span
<span style="display:inline-block; background-color:silver;padding:0px;margin:0px;height:13px; width:13px; overflow:hidden"><input type="checkbox" style="opacity:0.50;padding:0px;margin:0px" /></span>
Let's say you have a checkbox with the class (bootstrap) .form-check-input. Then you can use an image for an example as the check mark.
SCSS code:
<input class="form-check-input" type="checkbox">
.form-check-input {
width: 22px;
height: 22px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
outline: 1px solid blue;
&:checked
{
background: white url('blue.svg') no-repeat;
background-size: 20px 20px;
background-position: 50% 50%;
}
}
I had the same issue, trying to use large inputs and had a very small checkbox. After some searching, this is good enough for my needs:
input[type='checkbox']{
width: 30px !important;
height: 30px !important;
margin: 5px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance:none;
outline: 2px solid lightblue;
box-shadow: none;
font-size: 2em;
}
Maybe someone will find it useful.
Source: Stackoverflow.com