Custom CSS checkbox only working when label has "for" attribute - css

I found some really weird things I can't explain. I tried making custom checkboxes using CSS by following this codepen.
I copied most of it, but for some reason it didn't work. After checking my code, I noticed that I didn't use the id attribute on my checkbox and neither did I have a for attribute on my label.
For example:
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 1px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
}
<form action="#">
<p>
<input type="checkbox" />
<label>Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
<p>
<input type="checkbox" id="test4" disabled="disabled" />
<label for="test4">Brown</label>
</p>
</form>
For some reason, this custom styled checkboxes only work if the for and id attribute are specified. If I leave them away, I can no longer check/uncheck the checkbox. If you look at the snippet above, you will notice that you can't check/uncheck the "Red" checkbox, but you can check/uncheck the yellow one. I tried it on both Google Chrome and Mozilla Firefox (on Ubuntu), same behavior in both browsers.
I thought those attribute where pure semantics, but it seems that it causes some other things to happen as well.
I'm happy I got it to work, but I'm still confused and I don't know why it doesn't work without the attributes.

The for attribute in the label tells the browser to move the focus to the input whose ID is identical to the value. This makes the label a labelled control for that input element. This question has also been addressed previously on SO: What does "for" attribute do in HTML <label> tag?
When you remove the for attribute on the <label> element or the id attribute on the <input> element, you are decoupling both elements and therefore preventing the click event on the <label> from propagating into a focus + click event on the corresponding checkbox.

As terry explain, exactly you are detaching the event to be bubble via the for and id properties, if you remove the follow instruction on the css [type="checkbox"]:not(:checked),[type="checkbox"]:checked {} you will see that the default checkbox appear and its working without the use of for and id, pretty much what its doing this CSS snippet its putting the check on the top of the default checkbox.
see the follow modify codepen:
http://codepen.io/anon/pen/raarQO

Related

How to change the checked colour of the checkbox?

I want to change the color of my checked checkbox to green.And the size should aloso change.But in my code sizes are changing but the color doesn't. I tried using :checked:after also
input[type='checkbox']{
width: 16px !important;
height: 16px !important;
border-radius: 2px;
border: 1px solid #7A7A9D;
box-sizing: border-box;
}
input[type='checkbox']:checked{
width: 100px !important;
height: 100px !important;
margin: 5px;
color: red;
}
Checkboxes are not able to be styled. You would need a third party js plugin there are many available.
If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.
The same problem will arise when trying to style that little down arrow on a drop-down select element.
Checkboxes are generally not considered stylable, but there are a lot of good ways to cheat. W3C's Custom Check Boxes and Radio Buttons is a good place to start. It also looks like a related SO Question has a number of useful links.
I would use the more advanced CSS "+" selector
Also, using !important in CSS is usually asking for trouble. there are a few rare instances where it is helpful, but overall it usually just causes trouble.
To directly answer your question:
input[type='checkbox'] {
display: none;
}
input[type='checkbox']+span::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
border: 1px solid #7A7A9D;
box-sizing: border-box;
}
input[type='checkbox']:checked+span::before {
width: 100px;
height: 100px;
margin: 5px;
background: green;
}
<label>
<input type="checkbox">
<span>Eggs</span>
</label>
<label>
<input type="checkbox">
<span>Cheese</span>
</label>
<label class="custom-checkbox">
<input type="checkbox">
<span >Bacon</span>
</label>
You can use this trick, i hope it's can solve your problem
span {
color: grey; /* text colour before klick */
}
label > input[type="checkbox"] {
display: none;
}
label > input[type="checkbox"] + *::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 1rem;
height: 1rem;
border-radius: 10%;
border-style: solid;
border-width: 0.1rem;
border-color: gray;
}
label > input[type="checkbox"]:checked + *::before {
content: "✓"; /* you can cange check logo here */
transform: scale(0.7); /* this is for check size */
color: green; /* check colour */
text-align: center;
background: white; /* check background colour */
border-color: white; /* check border colour */
}
label > input[type="checkbox"]:checked + * {
color: green;
}
<label>
<input type="checkbox" name="key" value="value" />
<span>I am a checkbox</span>
</label>

How do i make the last char red in input placeholder?

This is my input field , i want to change the last char '*' to be red instead of transparent black.
I have tried a lot of different approaches but none of them works, any help would be appreciated.
You can give the placeholder another color using the ::placeholder selector. However, to give only one letter another color is not possible.
You can achieve what you want by creating a custom input element, using HTML and CSS.
/**
* Just a basic idea of how you can achieve what you want using HTML and CSS only.
*/
.input {
background-color: #fff;
border-radius: 3px;
position: relative;
display: inline-block;
border: 1px solid #888;
}
input {
background-color: transparent;
position: relative;
padding: 5px;
z-index: 1;
border: none;
}
.placeholder {
position: absolute;
color: #ccc;
left: 5px;
top: 50%;
transform: translateY(-50%)
}
/* Add the asterix when the input is required */
input:required + .placeholder::after {
content: "*";
color: red;
}
/* Hide the placeholder when the user wants to fill the input */
input:focus + .placeholder {
visibility: hidden;
opacity: 0;
}
<div class="input">
<input type="text" name="name" required />
<span class="placeholder">Your name</span>
</div>
Remove the placeholder="" from your input and place the text inside the custom span element with the classname placeholder.
When the input is required the CSS will append a asterix.

How to change the background color on a input checkbox with css? [duplicate]

I am trying to style a checkbox using the following:
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />
But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?
UPDATE:
The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.
Here are some useful links:
Creating Custom Form Checkboxes with Just CSS
Easy CSS Checkbox Generator
Stuff You Can Do With The Checkbox Hack
Implementing Custom Checkboxes and Radio Buttons with CSS3
How to Style a Checkbox With CSS
It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.
OLDER ANSWER
Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.
It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.
Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.
You can achieve quite a cool custom checkbox effect by using the new abilities that come with the :after and :before pseudo classes. The advantage to this, is: You don't need to add anything more to the DOM, just the standard checkbox.
Note this will only work for compatible browsers. I believe this is related to the fact that some browsers do not allow you to set :after and :before on input elements. Which unfortunately means for the moment only WebKit browsers are supported. Firefox + Internet Explorer will still allow the checkboxes to function, just unstyled, and this will hopefully change in the future (the code does not use vendor prefixes).
This is a WebKit browser solution only (Chrome, Safari, Mobile browsers)
See Example Fiddle
$(function() {
$('input').change(function() {
$('div').html(Math.random());
});
});
/* Main Classes */
.myinput[type="checkbox"]:before {
position: relative;
display: block;
width: 11px;
height: 11px;
border: 1px solid #808080;
content: "";
background: #FFF;
}
.myinput[type="checkbox"]:after {
position: relative;
display: block;
left: 2px;
top: -11px;
width: 7px;
height: 7px;
border-width: 1px;
border-style: solid;
border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
content: "";
background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
background-repeat: no-repeat;
background-position: center;
}
.myinput[type="checkbox"]:checked:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput[type="checkbox"]:disabled:after {
-webkit-filter: opacity(0.4);
}
.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
.myinput[type="checkbox"]:not(:disabled):hover:after {
background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}
.myinput[type="checkbox"]:not(:disabled):hover:before {
border-color: #3D7591;
}
/* Large checkboxes */
.myinput.large {
height: 22px;
width: 22px;
}
.myinput.large[type="checkbox"]:before {
width: 20px;
height: 20px;
}
.myinput.large[type="checkbox"]:after {
top: -20px;
width: 16px;
height: 16px;
}
/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Normal:</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" disabled="disabled" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" /></td>
</tr>
<tr>
<td>Small:</td>
<td><input type="checkbox" class="myinput" /></td>
<td><input type="checkbox" checked="checked" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
</tr>
<tr>
<td>Large:</td>
<td><input type="checkbox" class="myinput large" /></td>
<td><input type="checkbox" checked="checked" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
</tr>
<tr>
<td>Custom icon:</td>
<td><input type="checkbox" class="myinput large custom" /></td>
<td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
<td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
</tr>
</table>
Bonus Webkit style flipswitch fiddle
$(function() {
var f = function() {
$(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
};
$('input').change(f).trigger('change');
});
body {
font-family: arial;
}
.flipswitch {
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
}
.flipswitch:after {
position: absolute;
top: 5%;
display: block;
line-height: 32px;
width: 45%;
height: 90%;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: all 0.3s ease-in 0s;
color: black;
border: #888 1px solid;
border-radius: 3px;
}
.flipswitch:after {
left: 2%;
content: "OFF";
}
.flipswitch:checked:after {
left: 53%;
content: "ON";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" />
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" />
<span></span>
Before you begin (as of Jan 2015)
The original question and answer are now ~5 years old. As such, this is a little bit of an update.
Firstly, there are a number of approaches when it comes to styling checkboxes. The basic tenet is:
You will need to hide the default checkbox control which is styled by your browser, and cannot be overridden in any meaningful way using CSS.
With the control hidden, you will still need to be able to detect and toggle its checked state.
The checked state of the checkbox will need to be reflected by styling a new element.
The solution (in principle)
The above can be accomplished by a number of means — and you will often hear that using CSS3 pseudo-elements is the right way. Actually, there is no real right or wrong way, it depends on the approach most suitable for the context you will be using it in. That said, I have a preferred one.
Wrap your checkbox in a label element. This will mean that even when it is hidden, you can still toggle its checked state by clicking anywhere within the label.
Hide your checkbox.
Add a new element after the checkbox which you will style accordingly. It must appear after the checkbox so it can be selected using CSS and styled dependent on the :checked state. CSS cannot select 'backwards'.
The solution (in code)
label input {
visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
display: block;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
background: black;
}
<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</label>
Refinement (using icons)
"But hey!" I hear you shout. What about if I want to show a nice little tick or cross in the box? And I don't want to use background images!
Well, this is where CSS3's pseudo-elements can come into play. These support the content property which allows you to inject Unicode icons representing either state. Alternatively, you could use a third party font icon source such as font awesome (though make sure you also set the relevant font-family, e.g. to FontAwesome)
label input {
display: none; /* Hide the default checkbox */
}
/* Style the artificial checkbox */
label span {
height: 10px;
width: 10px;
border: 1px solid grey;
display: inline-block;
position: relative;
}
/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
content: '\2714';
position: absolute;
top: -5px;
left: 0;
}
<label>
<input type='checkbox'>
<span></span>
Checkbox label text
</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>
I always use pseudo elements :before and :after for changing the appearance of checkboxes and radio buttons. it's works like a charm.
Refer this link for more info
CODEPEN
Steps
Hide the default checkbox using css rules like visibility:hidden or opacity:0 or position:absolute;left:-9999px etc.
Create a fake checkbox using :before element and pass either an empty or a non-breaking space '\00a0';
When the checkbox is in :checked state, pass the unicode content: "\2713", which is a checkmark;
Add :focus style to make the checkbox accessible.
Done
Here is how I did it.
.box {
background: #666666;
color: #ffffff;
width: 250px;
padding: 10px;
margin: 1em auto;
}
p {
margin: 1.5em 0;
padding: 0;
}
input[type="checkbox"] {
visibility: hidden;
}
label {
cursor: pointer;
}
input[type="checkbox"] + label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: #fff;
color: #333;
content: "\2713";
text-align: center;
}
input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
input[type="checkbox"]:focus + label::before {
outline: rgb(59, 153, 252) auto 5px;
}
<div class="content">
<div class="box">
<p>
<input type="checkbox" id="c1" name="cb">
<label for="c1">Option 01</label>
</p>
<p>
<input type="checkbox" id="c2" name="cb">
<label for="c2">Option 02</label>
</p>
<p>
<input type="checkbox" id="c3" name="cb">
<label for="c3">Option 03</label>
</p>
</div>
</div>
Much more stylish using :before and :after
body{
font-family: sans-serif;
}
.container {
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
.checkbox {
width: 100%;
margin: 15px auto;
position: relative;
display: block;
}
.checkbox input[type="checkbox"] {
width: auto;
opacity: 0.00000001;
position: absolute;
left: 0;
margin-left: -20px;
}
.checkbox label {
position: relative;
}
.checkbox label:before {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 22px;
height: 22px;
transition: transform 0.28s ease;
border-radius: 3px;
border: 2px solid #7bbe72;
}
.checkbox label:after {
content: '';
display: block;
width: 10px;
height: 5px;
border-bottom: 2px solid #7bbe72;
border-left: 2px solid #7bbe72;
-webkit-transform: rotate(-45deg) scale(0);
transform: rotate(-45deg) scale(0);
transition: transform ease 0.25s;
will-change: transform;
position: absolute;
top: 12px;
left: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label::before {
color: #7bbe72;
}
.checkbox input[type="checkbox"]:checked ~ label::after {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
.checkbox label {
min-height: 34px;
display: block;
padding-left: 40px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
vertical-align: sub;
}
.checkbox label span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.checkbox input[type="checkbox"]:focus + label::before {
outline: 0;
}
<div class="container">
<div class="checkbox">
<input type="checkbox" id="checkbox" name="" value="">
<label for="checkbox"><span>Checkbox</span></label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox2" name="" value="">
<label for="checkbox2"><span>Checkbox</span></label>
</div>
</div>
Modern accessible solution - use accent-color
Use the new accent-color property and make certain to meet a proper contrast ratio of 3:1 to ensure accessibility. This also works for radio buttons.
.red-input {
accent-color: #9d3039;
height: 20px; /* not needed */
width: 20px; /* not needed */
}
<input class="red-input" type="checkbox" />
<!-- Radio button example -->
<input class="red-input" type="radio" />
Old answer, I only recommend this if you need more customization than the above offers:
I have been scrolling and scrolling and tons of these answers simply throw accessibility out the door and violate WCAG in more than one way. I threw in radio buttons since most of the time when you're using custom checkboxes you want custom radio buttons too.
Fiddles:
Checkboxes - pure CSS - free from 3rd party libraries
Radio buttons - pure CSS - free from 3rd party libraries
Checkboxes* that use FontAwesome but could be swapped with Glyphicons, etc. easily
Late to the party but somehow this is still difficult in 2019, 2020, 2021 so I have added my three solutions which are accessible and easy to drop in.
These are all JavaScript free, accessible, and external library free*...
If you want to plug-n-play with any of these just copy the style sheet from the fiddles, edit the color codes in the CSS to fit your needs, and be on your way. You can add a custom svg checkmark icon if you want for the checkboxes. I've added lots of comments for those non-CSS'y folks.
If you have long text or a small container and are encountering text wrapping underneath the checkbox or radio button input then just convert to divs like this.
Longer explanation:
I needed a solution that does not violate WCAG, doesn't rely on JavaScript or external libraries, and that does not break keyboard navigation like tabbing or spacebar to select, that allows focus events, a solution that allows for disabled checkboxes that are both checked and unchecked, and finally a solution where I can customize the look of the checkbox however I want with different background-color's, border-radius, svg backgrounds, etc.
I used some combination of this answer from #Jan Turoň to come up with my own solution which seems to work quite well. I've done a radio button fiddle that uses a lot of the same code from the checkboxes in order to make this work with radio buttons too.
I am still learning accessibility so if I missed something please drop a comment and I will try to correct it.
Here is a code example of my checkboxes:
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
/* Text color for the label */
input[type="checkbox"]+span {
cursor: pointer;
font: 16px sans-serif;
color: black;
}
/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
content: '';
border: 1px solid grey;
border-radius: 3px;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 0.5em;
margin-top: 0.5em;
vertical-align: -2px;
}
/* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */
input[type="checkbox"]:checked+span:before {
/* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
background-repeat: no-repeat;
background-position: center;
/* The size of the checkmark icon, you may/may not need this */
background-size: 25px;
border-radius: 2px;
background-color: #e7ffba;
color: white;
}
/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
/* Visible in the full-color space */
box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);
/* Visible in Windows high-contrast themes
box-shadow will be hidden in these modes and
transparency will not be hidden in high-contrast
thus box-shadow will not show but the outline will
providing accessibility */
outline-color: transparent; /*switch to transparent*/
outline-width: 2px;
outline-style: dotted;
}
/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
cursor: default;
color: black;
opacity: 0.5;
}
/* Styles specific to this fiddle that you do not need */
body {
padding: 1em;
}
h1 {
font-size: 18px;
}
<h1>
NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>
<p>You can easily change the background color, checkbox symbol, border-radius, etc.</p>
<label>
<input type="checkbox">
<span>Try using tab and space</span>
</label>
<br>
<label>
<input type="checkbox" checked disabled>
<span>Disabled Checked Checkbox</span>
</label>
<br>
<label>
<input type="checkbox" disabled>
<span>Disabled Checkbox</span>
</label>
<br>
<label>
<input type="checkbox">
<span>Normal Checkbox</span>
</label>
<br>
<label>
<input type="checkbox">
<span>Another Normal Checkbox</span>
</label>
I'd follow the advice of SW4's answer. Not anymore: Volomike's answer is far superior to all the answers here (note my suggested improvement in the comment to the answer). Proceed reading this answer if you are curious about alternative approaches, which this answer comments.
First of all, hide the checkbox and to cover it with a custom span, suggesting this HTML:
<label>
<input type="checkbox">
<span>send newsletter</span>
</label>
The wrap in label neatly allows clicking the text without the need of "for-id" attribute linking. However,
Do not hide it using visibility: hidden or display: none
It works by clicking or tapping, but that is a lame way to use checkboxes. Some people still use much more effective Tab to move focus, Space to activate, and hiding with that method disables it. If the form is long, one will save someone's wrists to use tabindex or accesskey attributes. And if you observe the system checkbox behavior, there is a decent shadow on hover. The well styled checkbox should follow this behavior.
cobberboy's answer recommends Font Awesome which is usually better than bitmap since fonts are scalable vectors. Working with the HTML above, I'd suggest these CSS rules:
Hide checkboxes
input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
I use just negative z-index since my example uses big enough checkbox skin to cover it fully. I don't recommend left: -999px since it is not reusable in every layout. Bushan wagh's answer provides a bulletproof way to hide it and convince the browser to use tabindex, so it is a good alternative. Anyway, both is just a hack. The proper way today is appearance: none, see Joost's answer:
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
Style checkbox label
input[type="checkbox"] + span {
font: 16pt sans-serif;
color: #000;
}
Add checkbox skin
input[type="checkbox"] + span:before {
font: 16pt FontAwesome;
content: '\00f096';
display: inline-block;
width: 16pt;
padding: 2px 0 0 3px;
margin-right: 0.5em;
}
\00f096 is Font Awesome's square-o, padding is adjusted to provide even dotted outline on focus (see below).
Add checkbox checked skin
input[type="checkbox"]:checked + span:before {
content: '\00f046';
}
\00f046 is Font Awesome's check-square-o, which is not the same width as square-o, which is the reason for the width style above.
Add focus outline
input[type="checkbox"]:focus + span:before {
outline: 1px dotted #aaa;
}
Safari doesn't provide this feature (see #Jason Sankey's comment), see this answer for Safari-only CSS
Set gray color for disabled checkbox
input[type="checkbox"]:disabled + span {
color: #999;
}
Set hover shadow on non-disabled checkbox
input[type="checkbox"]:not(:disabled) + span:hover:before {
text-shadow: 0 1px 2px #77F;
}
Test it on JS Fiddle
Try to hover the mouse over the checkboxes and use Tab and Shift+Tab to move and Space to toggle.
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 & Conditions</label>
</form>
The CSS Basic User Interface Module Level 4 adds support for this (finally) via a new solution called accent-color, and it's actually quite simple, unlike pretty much every other answer here:
input {
accent-color: rebeccapurple;
}
<input type="checkbox" />
Simply set whatever CSS color (e.g. named value, hex code, etc.) you want in as the value of accent-color, and it will be applied.
This currently works in Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+), and Safari (v15.4+).
Note: Edge, Chrome, and Opera (and possibly Safari; I can't test that) currently don't support alpha channel values via rgba() either (the RGB values of rgba() will still "work"; the alpha channel will simply be ignored by the browser). See MDN Browser Support for more information.
Simple to implement and easily customizable solution
After a lot of search and testing I got this solution which is simple to implement and easier to customize. In this solution:
You don't need external libraries and files
You don't need to add
extra HTML in your page
You don't need to change checkbox names
and id
Simple put the flowing CSS at the top of your page and all checkboxes style will change like this:
input[type=checkbox] {
transform: scale(1.5);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after,
input[type=checkbox]::after {
content: " ";
background-color: #fff;
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #00BFF0;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid #00BFF0;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
content: "\2714";
padding: -5px;
font-weight: bold;
}
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Checkbox</label>
You can style checkboxes with a little trickery using the label element an example is below:
.checkbox > input[type=checkbox] {
visibility: hidden;
}
.checkbox {
position: relative;
display: block;
width: 80px;
height: 26px;
margin: 0 auto;
background: #FFF;
border: 1px solid #2E2E2E;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.checkbox:after {
position: absolute;
display: inline;
right: 10px;
content: 'no';
color: #E53935;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox:before {
position: absolute;
display: inline;
left: 10px;
content: 'yes';
color: #43A047;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-transform: capitalize;
z-index: 0;
}
.checkbox label {
position: absolute;
display: block;
top: 3px;
left: 3px;
width: 34px;
height: 20px;
background: #2E2E2E;
cursor: pointer;
transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
z-index: 1;
}
.checkbox input[type=checkbox]:checked + label {
left: 43px;
}
<div class="checkbox">
<input id="checkbox1" type="checkbox" value="1" />
<label for="checkbox1"></label>
</div>
And a FIDDLE for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!
You can avoid adding extra markup. This works everywhere except IE via setting CSS appearance:
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Styling checkbox */
width: 16px;
height: 16px;
background-color: red;
}
input[type="checkbox"]:checked {
background-color: green;
}
<input type="checkbox" />
Recently I found a quite interesting solution to the problem.
You could use appearance: none; to turn off the checkbox's default style and then write your own over it like described here (Example 4).
input[type=checkbox] {
width: 23px;
height: 23px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-right: 10px;
background-color: #878787;
outline: 0;
border: 0;
display: inline-block;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:focus {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
input[type=checkbox]:checked {
background-color: green;
text-align: center;
line-height: 15px;
}
<input type="checkbox">
Unfortunately browser support is quite bad for the appearance option. From my personal testing I only got Opera and Chrome working correctly. But this would be the way to go to keep it simple when better support comes or you only want to use Chrome/Opera.
Example JSFiddle
"Can I use?" link
I prefer to use icon fonts (such as FontAwesome) since it's easy to modify their colours with CSS, and they scale really well on high pixel-density devices. So here's another pure CSS variant, using similar techniques to those above.
(Below is a static image so you can visualize the result; see the JSFiddle for an interactive version.)
As with other solutions, it uses the label element. An adjacent span holds our checkbox character.
span.bigcheck-target {
font-family: FontAwesome; /* Use an icon font for the checkbox */
}
input[type='checkbox'].bigcheck {
position: relative;
left: -999em; /* Hide the real checkbox */
}
input[type='checkbox'].bigcheck + span.bigcheck-target:after {
content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}
/* ==== Optional - colors and padding to make it look nice === */
body {
background-color: #2C3E50;
color: #D35400;
font-family: sans-serif;
font-weight: 500;
font-size: 4em; /* Set this to whatever size you want */
}
span.bigcheck {
display: block;
padding: 0.5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="bigcheck">
<label class="bigcheck">
Cheese
<input type="checkbox" class="bigcheck" name="cheese" value="yes" />
<span class="bigcheck-target"></span>
</label>
</span>
Here's the JSFiddle for it.
My solution
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
You can simply use appearance: none on modern browsers, so that there is no default styling and all your styles are applied properly:
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 2em;
height: 2em;
border: 1px solid gray;
outline: none;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: blue;
}
Here is a simple CSS solution without any jQuery or JavaScript code.
I am using FontAwseome icons but you can use any image
input[type=checkbox] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
visibility: hidden;
font-size: 14px;
}
input[type=checkbox]:before {
content: #fa-var-square-o;
visibility: visible;
/*font-size: 12px;*/
}
input[type=checkbox]:checked:before {
content: #fa-var-check-square-o;
}
From my googling, this is the easiest way for checkbox styling. Just add :after and :checked:after CSS based on your design.
body{
background: #DDD;
}
span{
margin-left: 30px;
}
input[type=checkbox] {
cursor: pointer;
font-size: 17px;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
transform: scale(1.5);
}
input[type=checkbox]:after {
content: " ";
background-color: #fff;
display: inline-block;
color: #00BFF0;
width: 14px;
height: 19px;
visibility: visible;
border: 1px solid #FFF;
padding: 0 3px;
margin: 2px 0;
border-radius: 8px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}
input[type=checkbox]:checked:after {
content: "\2714";
display: unset;
font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>
Modify the checkbox style with plain CSS. This does not require any JavaScript or HTML manipulation:
.form input[type="checkbox"]:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f096";
opacity: 1 !important;
margin-top: -25px;
appearance: none;
background: #fff;
}
.form input[type="checkbox"]:checked:before {
content: "\f046";
}
.form input[type="checkbox"] {
font-size: 22px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form class="form">
<input type="checkbox" />
</form>
Yikes! All these workarounds have led me to the conclusion that the HTML checkbox kind of sucks if you want to style it.
As a forewarning, this isn't a CSS implementation. I just thought I'd share the workaround I came up with in case anyone else might find it useful.
I used the HTML5 canvas element.
The upside to this is that you don't have to use external images and can probably save some bandwidth.
The downside is that if a browser for some reason can't render it correctly, then there's no fallback. Though whether this remains an issue in 2017 is debatable.
Update
I found the old code quite ugly, so I decided to give it a rewrite.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
Here's a working demo.
The new version uses prototypes and differential inheritance to create an efficient system for creating checkboxes. To create a checkbox:
var my_checkbox = Checkbox.create();
This will immediately add the checkbox to the DOM and hook up the events. To query whether a checkbox is checked:
my_checkbox.is_checked(); // True if checked, else false
Also important to note is that I got rid of the loop.
Update 2
Something I neglected to mention in the last update is that using the canvas has more advantages than just making a checkbox that looks however you want it to look. You could also create multi-state checkboxes, if you wanted to.
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
Object.prototype.extend = function(newobj){
var oldobj = Object.create(this);
for(prop in newobj)
oldobj[prop] = newobj[prop];
return Object.seal(oldobj);
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offsetx, offsety){
this.ctx.fillStyle = color;
this.ctx.fillRect(offsetx, offsety,
this.width - offsetx * 2, this.height - offsety * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0, 0);
this.draw_rect("#FFFFFF", 1, 1);
this.draw_state();
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
},
is_checked: function(){
return this.state == 1;
}
});
var Checkbox3 = Checkbox.extend({
ev_click: function(self){
return function(unused){
self.state = (self.state + 1) % 3;
self.draw();
}
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
if(this.is_partial())
this.draw_rect("#000000", 2, (this.height - 2) / 2);
},
is_partial: function(){
return this.state == 2;
}
});
I modified slightly the Checkbox used in the last snippet so that it is more generic, making it possible to "extend" it with a checkbox that has 3 states. Here's a demo. As you can see, it already has more functionality than the built-in checkbox.
Something to consider when you're choosing between JavaScript and CSS.
Old, poorly-designed code
Working Demo
First, set up a canvas
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));
Next, devise a way to have the canvas update itself.
(function loop(){
// Draws a border
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,15,15);
ctx.fillStyle = '#fff';
ctx.fillRect(1, 1, 13, 13);
// Fills in canvas if checked
if(checked){
ctx.fillStyle = '#000';
ctx.fillRect(2, 2, 11, 11);
}
setTimeout(loop, 1000/10); // Refresh 10 times per second
})();
The last part is to make it interactive. Luckily, it's pretty simple:
canvas.onclick = function(){
checked = !checked;
}
This is where you might have problems in IE, due to their weird event handling model in JavaScript.
I hope this helps someone; it definitely suited my needs.
SCSS / SASS Implementation
A more modern approach
For those using SCSS (or easily converted to SASS), the following will be helpful. Effectively, make an element next to the checkbox, which is the one that you will style. When the checkbox is clicked, the CSS restyles the sister element (to your new, checked style). Code is below:
label.checkbox {
input[type="checkbox"] {
visibility: hidden;
display: block;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
&:checked + span {
background: $accent;
}
}
span {
cursor: pointer;
height: 15px;
width: 15px;
border: 1px solid $accent;
border-radius: 2px;
display: inline-block;
transition: all 0.2s $interpol;
}
}
<label class="checkbox">
<input type="checkbox" />
<span></span>
Label text
</label>
A simple and lightweight template as well:
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
background: #fffed5;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
background: #ffffff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 20px;
text-align: center;
line-height: 8px;
display: inline-block;
width: 13px;
height: 15px;
color: #00904f;
border: 1px solid #cdcdcd;
border-radius: 4px;
margin: -3px -3px;
text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>
https://jsfiddle.net/rvgccn5b/
I think the easiest way to do it is by styling a label and making the checkbox invisible.
HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
The checkbox, even though it is hidden, will still be accessible, and its value will be sent when a form is submitted. For old browsers you might have to change the class of the label to checked using JavaScript because I don't think old versions of Internet Explorer understand ::checked on the checkbox.
Here's a modern version with a little animation, and simple styling you can customize:
.checkbox {
position: relative;
width: 20px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background: transparent;
border: 2px solid #7C7A7D;
border-radius: 5px;
margin: 0;
outline: none;
transition: 0.5s ease;
opacity: 0.8;
cursor: pointer;
}
.checkbox:checked {
border-color: #7C7A7D;
background-color: #7C7A7D;
}
.checkbox:checked:before {
position: absolute;
left: 2px;
top: -4px;
display: block;
content: '\2713';
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 14px;
font-weight: 800;
}
.checkbox:hover {
opacity: 1.0;
transform: scale(1.05);
}
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
Custom checkbox with CSS (WebKit browser solution only Chrome, Safari, Mobile browsers)
<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>
CSS:
/* The checkbox-cu */
.checkbox-cu {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 0;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox-cu */
.checkbox-cu input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox-cu */
.checkmark {
position: absolute;
top: 4px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border: 1px solid #999;
border-radius: 0;
box-shadow: none;
}
/* On mouse-over, add a grey background color */
.checkbox-cu:hover input~.checkmark {
background-color: #ccc;
}
/* When the checkbox-cu is checked, add a blue background */
.checkbox-cu input:checked~.checkmark {
background-color: transparent;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-cu input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-cu .checkmark::after {
left: 7px;
top: 3px;
width: 6px;
height: 9px;
border: solid #28a745;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 100;
}
By using Materialize with a custom stylesheet, you can achieve something like this:
CSS code
.custom_checkbox[type="checkbox"]:checked + span:not(.lever)::before {
border: 2px solid transparent;
border-bottom: 2px solid #ffd600;
border-right: 2px solid #ffd600;
background: transparent;
}
HTML code
<label>
<input type="checkbox" class="custom_checkbox" />
<span>Text</span>
</label>
Demo
JSFiddle demo
This helped me to change style (color) for checkbox
input[type=checkbox] {
accent-color: red;
}
We can also use the same for radio buttons.
This is simplest way and you can choose which checkboxes to give this style.
CSS:
.check-box input {
display: none;
}
.check-box span:before {
content: ' ';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML:
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
Here is a CSS/HTML-only version, no jQuery or JavaScript needed at all, Simple and clean HTML and really simple and short CSS.
Here is the JSFiddle
http://jsfiddle.net/v71kn3pr/
Here is the HTML:
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
<label for="myCheckbox_01_item" class="box"></label>
<label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>
Here is the CSS
#myContainer {
outline: black dashed 1px;
width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
display: inline-block;
width: 25px;
height: 25px;
border: black solid 1px;
background: #F00;
margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
This can be adapted to be able to have individual radio or checkboxes, grooups of checkboxes and groups of radio buttons as well.
This html/css, will allow you to also capture click on the label, so the checkbox will be checked and unchecked even if you click just on the label.
This type of checkbox/radio button works perfectly with any form, no problem at all. Have been tested using PHP, ASP.NET (.aspx), JavaServer Faces, and ColdFusion too.

Mozilla Firefox input radio button styling and default settings

I have various form elements on my page, but am having an issue with input radio buttons in Firefox. The radio buttons display perfectly in Safari and Chrome, but are entirely different in Firefox (circular instead of square!) and are :checked by default, which is also an issue.
From my research, the use of -moz-appearance is widely recommended, but in this instance I can't find any answers that directly relate to my query. Any help would be greatly appreciated.
Markup
<form>
<label class="radio" for="#">One</label>
<input type="radio">
<label class="radio" for="#">Two</label>
<input type="radio">
</form>
CSS
input[type="radio"] {
-webkit-appearance: none; /* Remove default appearance styling for Webkit */
-moz-appearance: none; /* Remove default appearance styling for Firefox */
background: #ccc;
width: 45px;
height: 45px;
vertical-align: middle;
margin: 0 10px;
cursor: pointer;
}
input[type="radio"]:hover { background: #e4e4e4; }
input[type="radio"]:checked {
background: #000;
position: relative;
width: 45px;
height: 45px;
}
input[type="radio"]:checked:after {
content: '';
position: absolute;
width: 20px;
height: 8px;
background: transparent;
top: 15px;
left: 10px;
border: 1px solid #fff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
JSFiddle
Please view the above fiddle in Firefox and Chrome to see the issues I am referring to. Thanks.
I wouldn't advise styling radio buttons to look like checkboxes but since you ask might I suggest that you approach it a different way...
Position the label after the input, hide the input (we'll use just the label to toggle it), then use the Adjacent Sibling Selector to style the label adjacent to the :checked input:
Like this:
input[type="radio"] {
/* hide the real radio button - but not with display:none as it causes x-browser problems */
opacity:0.2;
position:absolute;
/*left:-10000;*/
}
input[type="radio"] + label {
cursor: pointer;
}
/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */
input[type="radio"] + label:after {
display:inline-block;
content:"✓";
font-size:30px;
line-height:45px;
text-align:center;
color:#ccc;
background: #ccc;
width: 45px;
height: 45px;
vertical-align: middle;
margin: 0 10px;
border-radius:50%;
border:1px solid grey;
}
input[type="radio"] + label:hover:after {
background: #aaa;
}
input[type="radio"]:checked + label:after {
color:#fff;
background: #555;
box-shadow:0 0 8px deepSkyBlue;
border-color:white;
}
<form>
<input id="a" name="myradio" type="radio" />
<label for="a">One</label>
<input id="b" name="myradio" type="radio" />
<label for="b">Two</label>
</form>
You may want to check out this simple library I'm developing for just this purpose. The underlying elements are hidden and more easily stylable elements take their place.
Stylized Checkbox
The basic usage is very simple - just call stylizedRadioButtons('myradio');.

CSS Custom Radiobutton without text

Im searching the best way to style a custom radio button with pure CSS but without a label or label text.
At the moment I did something like that: (without the different states for checked, disabled etc)
input[type=radio] {
width : 28px;
margin : 0;
padding : 0;
opacity : 0;
& + label {
background: url("radio_unselected.png") no-repeat 0 2px;
padding-left : 28px;
line-height : 24px;
cursor: pointer;
}
That works perfectly as long as I got a label for my radios. As soon as I remove the label OR remove the label text, nothing is displayed. What is the best way to achieve my goal. Should I remove the background styles from the & + label and add it as background of the input itself and adjust the position so the radio would overlap the default radio style?
Ty for your help,
Andy
EDIT:
I added at least
&:before {
content:"";
display: inline-block;
}
Now I can actually add a label without text, but still not the perfect solution because a label tag is required.
I ran into the same dilemma. I want to use radio buttons as a pagination control for an image carousel. I came up with this:
input[type=radio] {
visibility: hidden;
position: relative;
margin-left: 5px;
width: 20px;
height: 20px;
}
input[type=radio]:before {
content: "";
visibility: visible;
position: absolute;
border: 2px solid #eb6864;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
input[type=radio]:checked:before {
background-color: #eb6864;
}
This works without any extra markup. Here's the example I'm using for my carousel:
<input type='radio' name='test'>
<input type='radio' name='test' checked>
<input type='radio' name='test'>
<input type='radio' name='test'>
<input type='radio' name='test'>
See this fiddle. I've only tested this in a recent build of Chrome; I have no idea how compatible it is.
Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/
It seems like there is no perfect solution. You actually need to have an element like the label or a div/etc tag to change the radio style. One possibility is to build your radios with a label around the input field:
<label>
<input type="radio"....../>
</label>
Then you can actually try to add the styling through css. Not the best solution in my opinion, but it makes the styling a lot easier.

Resources