Databases
StackOverflow2013
Postsdbo
POChrome/webkit not rendering css display change on input:checked + element + element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChrome/webkit not rendering css display change on input:checked + element + element
    primarykey
    data
    text
    <h2>Scenario</h2> <p>I have a CSS selector that is supposed to display sub-content when a label is clicked. The selector is along the lines of <code>input:checked + element + element</code> 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 <code>display: block</code> but it doesn't render it. I can unchec and check the property in developer tools and it displays, but not before.</p> <p>I assume that this is a bug in webkit.</p> <h2>Question</h2> <p>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)?</p> <h2>Code</h2> <p>HTML</p> <pre><code> &lt;input id="c1" type="checkbox"&gt; &lt;label for="c1"&gt;Ein&lt;/label&gt; &lt;section&gt;Content&lt;/section&gt; &lt;input id="c2" type="checkbox"&gt; &lt;label for="c2"&gt;Zwei&lt;/label&gt; &lt;section&gt;Content&lt;/section&gt; &lt;input id="c3" type="checkbox"&gt; &lt;label for="c3"&gt;Drei&lt;/label&gt; &lt;section&gt;Content&lt;/section&gt; </code></pre> <p>CSS</p> <pre><code>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; } </code></pre> <h2>Demo</h2> <p>Demo: <a href="http://jsbin.com/epibin/2">http://jsbin.com/epibin/2</a><br> Source: <a href="http://jsbin.com/epibin/2/edit">http://jsbin.com/epibin/2/edit</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoseph Marikle
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. USMikhus
      1. VTFavorite
    3. VO
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. This table or related slice is empty.
      1. VTUpMod
    1. COlooks like a re-paint "bug", siblings aren't re-painted on check toggle. If in the inspector you toggle the display on/off it does paint correctly. Same result in Safari (PC)
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. USMikeM
    2. COThanks for the reply, @mdmullinax. That would make sense , but it does render the change from `+` to `-`. I tried a few other attributes to test it as well. See this demo: http://jsbin.com/epibin/6/edit
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. USJoseph Marikle
    3. COThe CSS solution in [this answer](http://stackoverflow.com/a/8320736/681807) might better suit your needs as it does not require any additional HTML markup and can be removed when/if the bug is finally fixed
      singulars
      1. POChrome/webkit not rendering css display change on input:checked + element + element
      1. USMy Head Hurts
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload