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">
    <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>


    CSS Howto..

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?

    How can I select complete
  • element in navigation bar when hovered or selected?
  • How to capture a CSS multiline comment block with JavaScript regex

    How to apply CSS generated by colorzilla to the body element [closed]

    How to center li tags list

    How can I fix this parralax

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    How to adjust responsive behaviour of menu bar's elements

    How to CSS: select element based on inner HTML

    Flexbox: How do I create my thumbnails to span 100% of the container width?

    Basic Accordion pull down using java script and css not working. How can I get it to not have a symbol beside it?

    Show a box with text when hovering an image

    How do you format php error messages? they don't respect css

    How to make space between menu items in CSS/HTML

    How to stop css class on textbox

    How do I set the table cell widths to minimum except last column?

    How to style this form using CSS?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    css: how to surround an image with two other images vertically centered around the first one?

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How to make a div box with display:flex clickable like display:block?

    How to make CSS zig-zag borders? [duplicate]

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How to set css attribute for pseudo element in Dart

    Bold text not showing on iPhone but displays fine on Android

    How to write Text in css like show in images?

    How to Detect css style by iPhone/iPad

    Pure.css 1-3 grid only shows 2 items per line

    How to set alternating color to nested and sibling divs with certain class.