Home/ Questions/Q 745363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T09:05:10+00:00

I’m developing an offline web app that (for now) only targets Safari on the

  • 0

I’m developing an offline web app that (for now) only targets Safari on the iPhone/iPod. Mostly for fun, but also as a way to lessen my dependency on jQuery event bindings (and thereby hopefully speed up UI responsiveness), I tried substituting some CSS3 for basic show/hide functionality.

The following code is a simplified example that works in Firefox 3.6.3 but not in the latest Safari, both desktop and mobile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <style type="text/css">
    input:not(:checked) ~ select { display: none; }
    input:checked ~ select { display: inline; }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" /> <label for="cb">Toggle select</label>
  <select id="sel"><option value="">Select Box</option></select>
</body>
</html>

I wasn’t really expecting this to work, but I was pleased to see that it does, at least in Firefox. Any idea why it doesn’t work in Safari? In it, the <select> is initially hidden, which is correct, and the Web Inspector tells me that the proper display value is being set upon each click of the checkbox, yet the element fails to show.

I’ve done a similar successful experiment where I wrap the text inside the <label> in an <a href="#sel> tag and use a select:target { display: inline; } rule, but that’s not the behavior I ultimately desire.

Am I reaching too far? Is this kind of stuff best left to Javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I haven’t spent too long looking at this, but it does work, in principle, if you simplify it a little:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
  <style type="text/css">
    input:not(:checked) + select {
      display: none; 
    }
    input:checked + select {
      display: inline; 
    }
  </style>
</head>
<body>
  <input type="checkbox" id="cb" />
  <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

    In your example I think it’s the sibling selector that isn’t working – the :checked and :not(:checked) seem to work fine. The above example works for me in Safari 4.0.4.

    But i’d suggest this is a step too fair. Ulitmately CSS is a presentation technology, and by adopting this approach you’re mixing presentation with functional concerns… for me, personally, I would do this in Javascript.

    • 0