CODEWITHSUNDEEP
google-chromecsssafariwebkit
Joseph Marikle
Joseph Marikle

Reputation: 78550

Chrome/webkit not rendering css display change on input:checked + element + element

Scenario

I have a CSS selector that is supposed to display sub-content when a label is clicked. The selector is along the lines of input:checked + element + element giving that final element a display of block (default is none). The problem is that it works in all the major browsers with the exception of webkit. Chrome, Safari, and a mobile browser for android (v2.2 sorry, I'm behind the times) all fail to display the element. When I inspect the element in Chrome, it shows that it is supposed to be display: block but it doesn't render it. I can unchec and check the property in developer tools and it displays, but not before.

I assume that this is a bug in webkit.

Question

Here is the multipart question: Is this a known bug in webkit? Am I doing anything wrong with my selectors? And how can I work around the issue for webkit browsers (any creative suggestions)?

Code

HTML

  <input id="c1" type="checkbox">
  <label for="c1">Ein</label>
  <section>Content</section>

  <input id="c2" type="checkbox">
  <label for="c2">Zwei</label>
  <section>Content</section>

  <input id="c3" type="checkbox">
  <label for="c3">Drei</label>
  <section>Content</section>

CSS

input {
  float:left;
  clear:left;
  visibility: hidden;
  position:absolute;
}

label {
  color:green;
  display:block;
  cursor:pointer;
}

section {
  display:none;
}

label:after {
  content:" +";
}

input:checked + label:after {
  content:" -";
}

input:checked + label + section {
  display:block;
}

Demo

Demo: http://jsbin.com/epibin/2
Source: http://jsbin.com/epibin/2/edit

Upvotes: 13

Views: 7341

Answers (4)

Blake
Blake

Reputation: 162

@ScottS provides a solid solution. Another possible one that worked for me and makes more sense from an outsiders "why the heck did they do that" point of view:

input:checked ~ section {
  display:block;
}

which selects every 'section' that come after and are siblings of 'input:checked'.

There are two conditions I can think of where @ScottS's version is superior because the element in the position of 'label' gets selected as well in my solution: (1) 'input's sibling #1 & #2 are the same elements (instead of 'label' & 'section') (2) you are trying to be general by using the '*' selector.

Upvotes: 5

ScottS
ScottS

Reputation: 72261

Chain A Pseudo-Class

This demonstrates that this code fixes the bug (note that nth-child(n) matches any element, but the adding of it into the chain causes it to work):

input:checked + label:nth-child(n) + section {
  display:block;
}

Upvotes: 18

Andrew Bullock
Andrew Bullock

Reputation: 37398

As mdmullinax states, this is an outstanding bug in chrome.

This hack worked for me from the link in the accepted answer:

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Upvotes: 1

MikeM
MikeM

Reputation: 27405

sounds like a match to Bug 45168 – CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector

if you swap the <label> and <input> structure in the markup (and adjust the CSS accordingly) it works.

http://jsbin.com/epibin/10/edit

(but now the + - don't toggle)

EDIT:

putting the <label> and <section> in a div container works: http://jsbin.com/epibin/12/edit

Upvotes: 3

Related Questions