Css for input checkbox

HTML & CSS
9

Yes, your right. :slight_smile:

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