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

Tags: css,html5,checkbox,background-color

Problem :

Hello Friends all I'm trying to do is change the background color of a checkbox. I tired many things but nothing works. Can some one help?

    input[type="checkbox"] {
      background: #3d404e;
      border: #7f83a2 1px solid;

Solution :

I always use pseudo elements :before and :after for changing the appearance of check boxes and radio buttons. its works like a charm. it's pure css.

Your Background and border works fine in this method.

Here is how I do it.

.box {
  background: #666666;
  color: #ffffff;
  width: 250px;
  padding: 10px;
  margin: 1em auto;
p {
  margin: 1.5em 0;
  padding: 0;
input[type="checkbox"] {
  display: none;
label {
  cursor: pointer;
input[type="checkbox"] + label:before {
  border: 1px solid #7f83a2;
  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: #3d404e;
  color: #666;
  content: "\2713";
  text-align: center;
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
<div class="content">
  <div class="box">
      <input type="checkbox" id="c1" name="cb">
      <label for="c1">Option 01</label>
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option 02</label>
      <input type="checkbox" id="c3" name="cb">
      <label for="c3">Option 03</label>

    CSS Howto..

    How do I replace color: windowtext;

    How do I create html/css elements in a shape of a circle?

    How to strongly force line-height in css, with no streches?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    css how to remove the empty space at the left

    How to make angular material dialog box work in IE10

    How to apply custom css to android Webview when URL is from internet server?

    How to get rid of CSS cascading in internal element widgets

    CSS: how to align text content horizontally-centered and vertically-centered?

    how to calculate css rules priority in Javascript?

    Css positioning: how to position a block/paragraph under another

    Best way how to put elements above an tag?

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to call apk font use CSS in android?

    Show/hide rows based on class in HTML

    How to route requests in codeigniter so we can serve static css, js and img files?

    CSS: how to set screen layout according to the different dimension

    How to vertically align label and input in Bootstrap 3?

    How to center hgroup in css

    How to split an HTML paragraph up into its lines of text with JavaScript

    css3 pure: how to hover an element outside?

    Why the input box is showing so different on Ipad but not on chrome

    How to vertically align and stretch content using CSS flexbox

    How to achieve table's centering capabilities without tables

    How to create this image using CSS?

    How can i center the list items inside my unordered list?

    How to apply dynamic CSS for the label in IE7

    How to combine multiple CSS declarations to shorthand

    How can I apply CSS to elements created with javascript in IE?