0

I can get a p+p adjacent selector working, but not label + input. Why could this be?

p+p {
  color: red;
  /* Works fine! */
}

label+input {
    background-color: red;
  /* Doesn't work */
}
<p>Test</p>
<p>Test</p>
<br>
<label>Test</label><input type='checkbox'>

https://jsfiddle.net/h16engzw/

LittleBobbyTables
  • 4,361
  • 9
  • 38
  • 67
  • Are you looking to change the color of the checkmark? – j08691 Oct 16 '18 at 17:32
  • Sorry I meant to put background color. Just as an example. – LittleBobbyTables Oct 16 '18 at 17:33
  • See https://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div and https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css – j08691 Oct 16 '18 at 17:36
  • `label+input` is working as it should. We cannot apply the background-color to input checkbox. So try setting the `width`.. https://jsfiddle.net/nimittshah/vuwLyqs7/ – Nimitt Shah Oct 16 '18 at 17:39

1 Answers1

1

No, Actually it's working but you are not using the right property

label+input {
    background-color: red;
  /* Doesn't work */
}

in this code you are trying to give background-color: red; to a checkbox but you can't give background-color to a checkbox. for example if you will try this:

input {
        background-color: red;
    }

this will won't work too.

you are using right selector but the wrong property for a checkbox for example try this.

label+input {
        height:70px;
    }

now the height of checkbox will change. I hope you got my point. Please feel free to ask if not.

Anand
  • 207
  • 2
  • 8