Question

使用一组无线电选择按钮和HTML格式的文本输入字段。

<fieldset>
    <input type="radio" name="amount_choose" id="amountSelection40" value="40.00">
    <label for="amountSelection40">$40.00</label>

    <input type="radio" name="amount_choose" id="amountSelectionOther" value="Other">
    <label for="amountSelectionOther" class="amountSelectionLabelOther">Other</label>
    <input type="text" id="amountSelectionOtherField" name="amount_Other">
</fieldset>

我有CSS标记文本输入＃amountSelectionOtherField as display none。我的想法是，如果选中“其他”单选按钮，则只显示文本框。

input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField
    {display: inline-block;}

CSS适用于Windows机器上的Chrome，Firefox，IE和我的MAC上的Chrome，Firefox，但不适用于Safari。

有趣的是，当我在iOS设备上查看Safari中的页面时，它似乎也无法正常工作，但是如果在我选择了“其他”单选按钮然后在我的设备上进行了更改，则文本输入将会出现。如果我将无线电选择器更改回40，则在我再次更改方向之前，文本输入不会消失。

我根本不在CSS文件中使用任何媒体查询。这只是Safari的一个怪癖吗？关于如何在不必诉诸JS的情况下完成这项工作的任何建议？

Answer 1

我刚刚在Safari（版本8.0.2）中对以下内容进行了测试，并且运行正常。我通过使用通用兄弟（〜）选择器简化了选择。

input#amountSelectionOtherField{display: none;}
input#amountSelectionOther:checked ~ input#amountSelectionOtherField {display: inline-block; }

这是一个小提琴：http://jsfiddle.net/ugnyaLua/14/

以下是关于〜选择器的文章：https://css-tricks.com/almanac/selectors/g/general-sibling/

input [type =“radio”]＃amountSelectionOther：checked + label + input＃amountSelectionOtherField {display：inline-block;}在Safari中不起作用

1 个答案: