input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField{display: inline-block;} 在 Safari 中不起作用答案

【问题标题】：input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField{display: inline-block;} not working in Safariinput[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField{display: inline-block;} 在 Safari 中不起作用
【发布时间】：2015-09-28 03:15:52
【问题描述】：

在 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 将文本 input#amountSelectionOtherField 标记为不显示。我的想法是只希望在选中“其他”单选按钮时显示文本框。

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 的情况下完成这项工作的任何建议？

【问题讨论】：

这是 Safari 中的一个已知问题。很高兴看到它在过去几年中根本没有修复。

标签： html css safari css-selectors

【解决方案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/

【讨论】：

没问题，很高兴为您提供帮助！