0

I am trying to make a cool looking checkbox.I got a checkbox followed by a hidden input then a label.I am trying to change the font weight of the label when the checkbox is checked.

    <html>
    <head>
 <style type="text/css">
   input[type="checkbox"]:checked + input[type="hidden"] + label{
    font-weight:bold;
   }
 </style>
    </head>

    <body>
 <div>
  <input type="checkbox" id="1"/>
  <input type="hidden"/>
  <label for="1">My Label</label>
 <div>
    </body>

    </html>

But I can't make it work on Chrome.But if I try this on jsfiddle with chrome it works!!!!!

Here is the Fiddle

Any ideas?

roah
  • 127
  • 2
  • 9

2 Answers2

2

Changed your css to the below and it works fine

input[type="checkbox"]:checked + input + label{
                font-weight:bold;
}
ahb
  • 138
  • 11
  • @Emre no probs! But I can't figure out why it wouldn't work when applying the hidden attr. – ahb Oct 17 '14 at 10:40
  • 1
    Actually css is not wrong, there is a bug with multiple adjacent-sibling selector in some Chrome versions. – Cem Özer Oct 17 '14 at 10:42
  • @CemOzer that's what I thought as well but can't understand how it is working on jsfiddle.Most likely it applies some rules that makes it work. – roah Oct 17 '14 at 10:44
  • I have this issue in jsfiddle too, using Chromium 36.0 on Ubuntu 12.04. In FF it's totally fine. – Cem Özer Oct 17 '14 at 10:47
0

you set minor change than it's work.

<style type="text/css">
        input[type="checkbox"]:checked + input[type="hidden"] ~ label{
            font-weight:bold;
        }
</style>
Mansukh Khandhar
  • 2,542
  • 1
  • 19
  • 29