input[type="checkbox"] {
width: 2.2em;
height: 2.2em;
}This code works great in IE and Chrome but not in Firefox.
Any thoughts would be appreciated.
Thank you.
Hi javascript7,
There are several methods out there that completely re-style default checkboxes.
Some of them get rather intensive and go a bit overboard as far as I’m concerned, to each his own though.
As you’ve seen Firefox will not allow you to resize the checkbox.
That is, while in -moz-appearance: checkbox; mode.
And that would be the answer to a workaround for FF if you want to pursue it.
Working from MDN’s example as seen in the JSfiddle, I was able to put together an example that targets FF only.
It does use a checkmark background image on the :checked state. You loose the default checkmark when you remove the default appearance, so you need to provide a replacement.
This seems to be a fairly simple way of taking care of FF, without getting into the full blown checkbox restyle methods.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firefox Checkbox Resized</title>
<style>
input[type="checkbox"] {
width: 2.2em;
height: 2.2em;
-moz-appearance: none;
border: 1px solid #777;
border-radius: 3px;
background-color: #eee;
vertical-align: bottom;
}
input[type="checkbox"]:active {
background-color: #ddd;
}
input[type="checkbox"]:checked {
background-image: url("http://pngimages.net/sites/default/files/tick-off-png-image-97012.png");
background-size: contain;
}
</style>
</head>
<body>
<form>
<div>
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe to newsletter?</label>
</div>
<div>
<button type="submit">Subscribe</button>
</div>
</form>
</body>
</html>
3 Likes
Hi javascript7,
Generally speaking, form elements aren’t supposed to be styled. 
But browsers do as they please anyway, so you’ll have a hard time getting a consistent look. Check for a workaround at:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms
I tossed up another example for you to play with:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Styling Checkboxes Crossbrowser</title>
<style>
input[type="checkbox"]{
position:absolute;
left:-999em;
}
input[type="checkbox"] + label:before{
display:inline-block;
margin:0 5px;
border:1px solid black;
border-radius:3px;
width:.8em;
height:.8em;
font:900 2.6em/.7 monospace;
vertical-align:middle;
text-align:center;
background:white;
color:green;
content:"\a0"; /* nbsp */
}
input[type="checkbox"]:focus + label:before{
outline: 1px dotted black;
outline-offset:2px;
}
input[type="checkbox"]:checked + label:before{
content:"\2714"; /* unicode heavy check mark */
}
input[type="checkbox"] + label:hover:before{
background:#ddf;
}
</style>
</head><body>
<form>
<input id="one" type="checkbox" /><label for="one">One</label>
<input id="two" type="checkbox" /><label for="two">Two</label>
</form>
</body></html>
EDIT)
Touché, @Ray.H!
3 Likes
I will check it out, thank you for that.
1 Like
Thanks for that, I will check it out.
1 Like
You would also need -webkit-appearance: none; for Chrome and Safari on a mac
Hi there javascript7,
Check out the attachment to see checkboxes identical to Chrome’s. 
javascript7.zip (7.3 KB)
coothead
2 Likes
Yes, your right.
My intention was for Firefox only to accept dimensions.
Chrome would then get it’s default styling, since it ignored the following rules when it’s appearance was not altered.
border: 1px solid #777;
border-radius: 3px;
background-color: #eee;
However, as you pointed out, Chrome can get the same styles by adding -webkit-appearance: none;
The (rabbit trail) link I gave to MDN’s fiddle showed the x-browser version using the vendor prefixes.
I do see that IE11 is not supporting -ms-appearance: none;
Not sure about Edge, I’m on Win 7 and can’t go above IE11.
It will be much better to pre-load the check mark image too, I was just knocking a quick example together earlier.
check-mark.png
So for a x-browser version to restyle the native inputs without using pseudos it might go like so…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Resized</title>
<style>
form {
display: inline-block;
border:1px solid;
border-radius:12px;
padding:12px;
}
input[type="checkbox"] {
width: 2.2em;
height: 2.2em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 1px solid #777;
border-radius: 3px;
background: #eee 0 -200px/contain url(check-mark.png) no-repeat;
vertical-align: middle;
}
input[type="checkbox"]:active {
background-color: #ddd;
}
input[type="checkbox"]:checked {
background-position: 0 0;
}
input[type="reset"],
input[type="submit"] {
display:block;
margin:.5em 0 0;
}
</style>
</head>
<body>
<form>
<input id="one" type="checkbox" name="apples" value="1">
<label for="one">Apples</label>
<br>
<input id="two" type="checkbox" name="oranges" value="2">
<label for="two">Oranges</label>
<br>
<input id="three" type="checkbox" name="bananas" value="3">
<label for="three">Bananas</label>
<br>
<input type="reset" value="Reset Fields">
<input type="submit" value="Submit Fruit">
</form>
</body>
</html>
3 Likes
Perhaps a data uri image would be better in this case to save http requests.
e.g.
It should be possible using linear gradients instead of an image also but may get complex.
3 Likes
Paul,
Here’s an svg data image, it has a smaller file size.
I just ran a live edit on your codepen and it looks nice too.
I’ve been using this handy converter I found on codepen.
Convert SVG to Data URI for css background-image
input[type="checkbox"] {
width: 2.2em;
height: 2.2em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 1px solid #777;
border-radius: 3px;
vertical-align: middle;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
background-repeat:no-repeat;
background-size:cover;
background-color:#eee;
background-position:-10em -10em;
transition:.3s ease;
}
This was the svg check mark before converting
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8
c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7
C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
3 Likes
I should have thought of that as I drew the check mark myself and should have saved it as svg.
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.