iphone - 单选按钮显示不正确

Question

我有几个单选按钮，它们显示得像普通按钮，它们看起来像这样:

            <div class="buttoncontainer" style="position:relative; left: 80px;">
                <label><input type="radio" name="toggle" checked="checked" class="_today">          <span class="css3button-left">Today</span></label>
                <label><input type="radio" name="toggle" class="_tomorrow"><span class="css3button">Tomorrow</span></label>
                <label><input type="radio" name="toggle" class="_weekend"><span class="css3button">This Weekend</span></label>
                <label><input type="radio" name="toggle" class="_nextmonth"><span class="css3button-right">Next Month</span></label>
            </div>

我这样选择时更改按钮的外观:

     .buttoncontainer  input:checked + span
     { 
        ...
     }

这适用于我测试过的每个浏览器 - IE、FireFox、Chrome，甚至是我计算机上的 Safari，但在使用 Safari 的 Ipad 或 Iphone 上，外观永远不会更改为 :checked 。有人知道为什么这些按钮不能只在 ipad 上工作吗？

Answer 1

我想你的意思是标签不可点击？

由于某些原因，label 元素的通常行为在开箱即用的移动 WebKit 上不起作用。

添加标签{ cursor: pointer; 到 CSS 解决了这个问题。