0

I want to change the color of my checkbox (or label, or any other element) using only CSS based on the :checked selector. The following is my HTML as I have it, and assume I cannot change it. 

<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>

I have tried using input[type="checkbox"] + label:before in my CSS, but since the label actually holds the checkbox rather than coming after it, this won't work.

I also have tried creating pseudo-elements after the label and checkbox, but have not been able to get that to work either.

Basically I am looking for this style of functionality: http://jsfiddle.net/zAFND but using only CSS and unfortunately I cannot change my HTML.

Njord
  • 142
  • 6
  • 1
    check this https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label – Nidhin Joseph Jun 28 '19 at 05:33
  • @NidhinJoseph I did try something similar, however as that answer points out, that method will "always work _as long as the label follows the radio input_." And in my case, the label contains the input, rather than following it. – Njord Jun 28 '19 at 05:43

3 Answers3

2

You can use Jquery to achieve this.

$("input").click(function() { 
    $(this).parent().toggleClass('checked');
})

this will toggle class checked to the parent label when input changes

now you can style it as you want.

$("input").click(function() { 
    $(this).parent().toggleClass('checked');
})
  label { 
    padding: 10px 20px;
    border-radius: 3px;
}

.checked { 
    background-color: red;
    color: white;
}
<div class="chk">
      <label>
        CheckMe
        <input type="checkbox" id="myCheckBox" />
      </label>
      <script src="node_modules/jquery/dist/jquery.js"></script>
      <script src="index.js"></script>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
  • That would work, honestly a solution changing the HTML or using JS would be trivial, but unfortunately I cannot use any JS or change the HTML. – Njord Jun 28 '19 at 06:09
  • Unfortunately you can't select parent element using only css – Kareem Dabbeet Jun 28 '19 at 06:11
  • Correct, I am mostly curious if it is possible to add some sort of pseudo-element or such to indicate the `:checked` status – Njord Jun 28 '19 at 06:16
2

input[type="checkbox"]:checked {
border-radius: 2px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width: 17px;
height: 17px;
cursor:pointer;
position: relative;
top: 5px;
background-color:#409fd6;
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;

}
<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>
Gowtham
  • 1,557
  • 12
  • 24
  • Np, You can refer https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector for label color changes – Gowtham Jun 28 '19 at 06:51
2

Solution: You can try this Code...

label{
  position: relative;
  padding: 15px;
  color: #000;
  z-index: 1;
  margin-top: 20px;
  display: block;
}
input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  outline: none;
}
input:after{
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 86px;
  height: 42px;
  position: absolute;
  background-color: #ccc;
  z-index: -1;
  border-radius: 4px;
}
input:checked::after{
  background-color: red;
}
<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>
Mak0619
  • 652
  • 6
  • 20