unable to change background color of disabled checkbox

Question

I tried the following:

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

but it's not working.

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;
}

    <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' type='checkbox' checked required disabled style="background-color:red">
                </div>
                <input type='submit' value = 'SUBMIT' name='mySubmit'>
            </fom>
        </div>
        <script src="../public/js/register.js"  type="text/javascript"></script>
    </body>
</html>

Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) — Rainbow, Jun 28 '21 at 20:18

Andy Hoffman · Accepted Answer · 2021-06-28T20:38:24.383

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>

score 0 · Answer 2 · answered Jun 28 '21 at 19:53

It's actually not that you can't style the :disabled state of a checkbox. It's more that you can't style much on a checkbox input at all. You'll see if I do the same style, but remove the :disabled state, the regular checkboxes are still the default color (on most browsers). The size is applied, but not the background-color.

input[type=checkbox]
{
  width: 50px;
  height: 50px;
  background-color: red;
}

<input type="checkbox"/>

This is entirely up to the developer of the browser to implement, and as such it varies widely between all of them, but you can expect many CSS properties to be ineffective on a checkbox.

The typical solution to a problem like this is to implement your own custom checkbox element. At its core it's quite simple, having only a single boolean state that changes when you click on it.

unable to change background color of disabled checkbox

2 Answers2