Css ''Background-Color" Attribute Not Working on Checkbox Inside ≪Div≫

  • Home
  • Languages
  • HTML
  • Css ''Background-Color" Attribute Not Working on Checkbox Inside ≪Div≫

CSS ''background-color attribute not working on checkbox inside div

A checkbox does not have background color.

But to add the effect, you may wrap each checkbox with a div that has color:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

Checked checkbox background not working

Add the following code inside your document.ready() Which will loop through all the checked input and add the class.

$("input:checked").each(function(){
   $(this).parent().addClass("fltr-chk-box-bg");
});

Like the following:

$(document).ready(function() {  /*checkbox-background*/  $(".checkbox-primary").on("click", "input[type='checkbox']", function() {    if ($(this).is(":checked")) {      $(this).parent().addClass("fltr-chk-box-bg");    } else {      $(this).parent().removeClass("fltr-chk-box-bg");    }  });  /*checkbox-background-ends*/    $("input:checked").each(function(){    $(this).parent().addClass("fltr-chk-box-bg");  });});
.checkbox {  padding-left: 30px;}
.checkbox>label {  display: inline-block;  position: relative;  padding-left: 5px;  color: #686868;  padding-top: 2px;  min-height: 25px;  font-family: 'montserrat';}
.checkbox>span {  padding-right: 17px;  padding-top: 3px;  font-family: 'montserrat';}.checkbox input[type="checkbox"]:disabled+label::before {  background-color: #eeeeee;  cursor: not-allowed;}
.checkbox.checkbox-circle label::before {  border-radius: 50%;}
.checkbox.checkbox-inline {  margin-top: 0;}
.fltr-chk-box-bg {  background-color: #E3E7EA;  color: #1E6C97;}
.checkbox-primary input[type="checkbox"]:checked+label::before {  background-color: #1E6C97;  border-color: #428bca;}
.checkbox-primary input[type="checkbox"]:checked+label::after {  color: #fff;}
.checkbox input[type="checkbox"]:checked+label+span {  position: relative;  z-index: 75456;}
.checkbox input[type="checkbox"]:checked+label+span:before {  content: '';  position: absolute;  top: 0;  right: 0;  border-bottom: 13px solid #CCD2D6;  border-top: 11px solid #CCD2D6;  border-right: 50px solid #CCD2D6;  border-left: 6px solid transparent;  z-index: -7523;}
.fltr-panel-group {  margin-bottom: 0px;}
.fltr-panel {  border-bottom: none;}
.fltr-panel:last-child {  border-bottom: 1px solid #ddd;}
.fltr-panel-title>a {  padding: 18px 8px 19px 8px;  font-size: 1.21em;  color: #2B3439;  font-family: 'montserrat';}
.panel-group .panel+.panel.fltr-panel {  margin-top: 0px;}
.panel-group.fltr-panel-group .panel-heading+.panel-collapse>.panel-body.fltr-panel-body {  border-top: none;  padding: 0px 5px 5px 5px;}
.fltr-and-reset {  padding-top: 14px;  padding-bottom: 5px;}
.fltr-and-reset a {  vertical-align: middle;  font-size: 0.78em;}
.fltr-and-reset>.pull-right {  font-size: 1.07em;  color: #1E6C97;  font-family: 'montserrat';}
.fltr-and-reset>.text-left {  font-size: 1.14em;  color: #302F2F;  line-height: 1.647;  font-family: 'montserrat';}
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><form>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="" checked>    <label>North America</label><span class="pull-right">75</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="" checked>    <label>South America</label><span class="pull-right">98</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>North America</label><span class="pull-right">23</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South Asia</label><span class="pull-right">47</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South America</label><span class="pull-right">53</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>North America</label><span class="pull-right">55</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South America</label><span class="pull-right">26</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>North America</label><span class="pull-right">23</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South America</label><span class="pull-right">78</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South America</label><span class="pull-right">90</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>North America</label><span class="pull-right">67</span>  </div>  <div class="checkbox checkbox-primary">    <input type="checkbox" value="">    <label>South America</label><span class="pull-right">88</span>  </div></form>

Checkbox CSS cannot change background color for the checkbox

You can't modify checkbox color.

Instead, create pseudo elements with background custom background color, like this :

.form-check {
  position: relative;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:checked+label::before {
  content: "";
  display: block;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  left: 0;
  top: 5px;
  background-color: #FA9E57;
  font-family: "Montserrat";
  border-radius: 2px;
  border: 1px solid rgb(150 150 150 / 30%);
}

input[type=checkbox]:checked+label::after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">

<div class="form-group my-4">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="privacy">
     <label class="form-check-label ml-3" for="privacy">
      Agree privacy
     </label>
   </div>
</div>

unable to change background color of disabled checkbox

I'm proposing a different solution, which preserves accessibility and still allows for the styling of your choice.

Instead of using the disabled attribute on the checkbox, which ostensibly makes it impossible to override the background-color, add aria-disabled="true", which allows for visitors on screen-readers to correctly identify the element as disabled.

<input class='skippers' aria-disabled="true" type='checkbox' checked required>
<!--                    ~~~~~~~~~~~~~~~~~~~                                -->

As for the majority of visitors viewing our form elements inside a more common browser, we can ignore all clicks on the checkbox.

input[type="checkbox"][aria-disabled="true"] {
  background-color: blue;
  pointer-events: none;
}

form {
  border: solid 2px darkblue;
  width: 60%;
  padding-bottom: 3%;
  margin: 0 auto;
}

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.info {
  margin: 2% 3%;
}

.contact {
  display: flex;
  flex-direction: column;
  margin-bottom: 1%;
  width: 50%;
  font-size: 1.5vw;
}

.alerts {
  width: 100%;
  font-size: 1.5vw;
  text-align: left;
  margin-left: 3%;
  color: red;
}

p.alerts {
  text-align: center;
  margin-top: 1%;
  margin-bottom: 5%;
  margin-left: 0;
}

.hidden {
  visibility: hidden;
}

.row {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

.col {
  display: flex;
  flex-direction: column;
}

#skippers {
  display: flex;
  flex-direction: row;
  Justify-content: center;
  align-items: center;
  margin-bottom: 3%;
}

.skippers {
  margin: 0 3%;
}

input[type="checkbox"]:disabled {
  background-color: blue;
}

input[type='submit'] {
  color: white;
  background-color: blue;
  font-weight: bold;
}

input[type="checkbox"][aria-disabled="true"] {
  background-color: blue;
  pointer-events: none;
}
<h1>Registration</h1>
<form action='register.php' method='POST'>
  <h2>Enter contact info</h2>
  <div id='container'>
    <div class='contact'>
      <input class='info' type='text' name='fname' placeholder='first name'>
      <span class='alerts hidden'>Please enter your first name</span>
    </div>
    <div class='contact'>
      <input class='info' type='text' name='lname' placeholder='last name'>
      <span class='alerts hidden'>Please enter your last name</span>
    </div>
    <div class='contact'>
      <input class='info' type='tel' name='phone' placeholder='mobile phone number'>
      <span class='alerts hidden'>Please enter your mobile phone number</span>
    </div>
    <div class='contact'>
      <input class='info' type='email' name='email' placeholder='email'>
      <span class='alerts hidden'>Please enter your email</span>
    </div>
    <div class='contact'>
      <input class='info' type='password' name='password' placeholder='password'>
      <span class='alerts hidden'>Please enter your password</span>
    </div>
    <div class='contact'>
      <input class='info' type='password' name='confirm' placeholder='confirm password'>
      <span class='alerts hidden'>Please enter your password</span>
    </div>

  </div>
  <h2>Days available to sail</h2>
  <div class='row'>
    <div class='col'>
      <label for="MO">M</label>
      <input class='dow' type="checkbox" name="MO">
    </div>
    <div class='col'>
      <label for="TU">T</label>
      <input class='dow' type="checkbox" name="TU">
    </div>
    <div class='col'>
      <label for="WE">W</label>
      <input class='dow' type="checkbox" name="WE">
    </div>
    <div class='col'>
      <label for="TH">T</label>
      <input class='dow' type="checkbox" name="TH">
    </div>
    <div class='col'>
      <label for="FR">F</label>
      <input class='dow' type="checkbox" name="FR">
    </div>
    <div class='col'>
      <label for="SA">S</label>
      <input class='dow' type="checkbox" name="SA">
    </div>
    <div class='col'>
      <label for="SU">S</label>
      <input class='dow' type="checkbox" name="SU">
    </div>
  </div>
  <p class='alerts hidden'>Please select at least 1 day</p>
  <h2>Select Skippers</h2>
  <div id='skippers'>
    <p class='skippers'>David Cross</p>
    <input class='skippers' aria-disabled="true" type='checkbox' checked required>
  </div>
  <input type='submit' value='SUBMIT' name='mySubmit'>
  </fom>
  </div>
  <script src="../public/js/register.js" type="text/javascript"></script>
  </body>

  </html>

How to change checkbox background color in simple HTML

You can't style the browser's default checkbox, so we have to hide it and create a custom checkbox like so:

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px black solid;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #002B4E;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}
<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

Change background color of the checkbox which looks like a button when checked

You need to put your input outside the label as a sibling (since we will use the Adjacent sibling combinator ) and use the "for" attributer

.checkboxes{
  cursor: pointer;
  z-index: 90;
  text-align: center;
  font-family: "Arial";
  font-weight: bold;
  font-size: 16px;
  color: #235988;
  width: 270px;
  margin: 5px;
  border-radius: 0px !important;
  border: 1px solid #235988 !important;
  padding-bottom: 5px;
 }

.checkboxes:hover,
  .form-check input[type="checkbox"]:checked + label{
    background: #235988;
    color: #FFF;
  }


.form-check input[type="checkbox"] {
  opacity: 0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
      <div class="col-md-7">
        <input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >
        <label class="btn btn-default checkboxes" for="checkbox-1">
            Checkbox1
        </label>
        <input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >
        <label class="btn btn-default checkboxes" for="checkbox-2">
            Checkbox2
        </label>
         <input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >
        <label class="btn btn-default checkboxes" for="checkbox-3">
           Checkbox3
        </label>
</div>

Why cannot change checkbox color whatever I do?

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.

Align checkbox with label and add background color to checked checkboxes

There are more ways. For example.

input[type='checkbox'] {float: left;}
input[type='checkbox'] + label {display: block; margin-left: 30px;}

In real, you use any custom checkboxes, in CSS will be custom element instead of input[type='checkbox'] of course.

https://jsfiddle.net/1haub3kx/1/


Related Topics

How to Support Placeholder Attribute in Ie8 and 9

Inline Elements and Line-Height

How to *Really* Justify a Horizontal Menu in Html+Css

How to Use Xpath Contains() For Specific Text

Base64 Png Data to HTML5 Canvas

Difference Between Iframe, Embed and Object Elements

Why Does My "Oninvalid" Attribute Let the Pattern Fail

Bootstrap Navbar: Nothing Is Displayed on Smaller Devices

Use CSS to Remove the Space Between Images

How to Add a "Search" Button in a Text Input Field

Angular 5 Formgroup Reset Doesn't Reset Validators

Html5 Email Validation

Ng-App Vs. Data-Ng-App, What Is the Difference

How to Remove a Div But Keep Its Elements

Using :Before and :After CSS Selector to Insert HTML

<Fieldset> Resizes Wrong; Appears to Have Unremovable 'Min-Width: Min-Content'

What Are the Different Doctypes in HTML and What Do They Mean

How Does the Vertical-Align Property Work


Leave a reply



Submit