访问隐藏的输入元素

Question

我的问题： 如何通过标签访问隐藏的输入元素？

详细解释：

在我的网站上，我为单选按钮设置了可见性 none 并自定义了 before 元素以获得自定义设计。

问题是当我尝试通过选项卡访问输入类型收音机时我无法执行此操作，因为它隐藏了可见性。

那么，谁能建议我如何使用选项卡访问隐藏的输入元素？

网站

Demo Form

请访问上面的 link，您会在那里找到一个表格。现在，请尝试使用选项卡访问单选按钮。它会跳过单选按钮。

Answer 1

您的选项卡流中必须有一个支持 tabindex 的项目，并且由于您的单选按钮已隐藏，因此无法使用。然而 anchor 标签 确实支持标签索引，所以你可以用 a 标签包装每个 li 标签的内部元素，并为其分配一个在你的标签中工作的标签索引流量...

变化：

<li tabindex="0" class="radio gchoice_2_14_0">
    <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
    <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
    </label>
</li>

收件人：

<li tabindex="0" class="radio gchoice_2_14_0">
    <a tabindex="1010">
        <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
        <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
        </label>
    </a>
</li>

这将在您使用 Tab 键定位到锚标记时为其提供焦点（假设前一个元素的 tabindex 为“1009”或更低）。

这回答了您关于如何切换到它的问题。现在你已经有了，你需要做几件事：

根据您认为合适的方式为 form li.radio a:focus 设置元素 css 的样式。
为 a 元素设置按键事件，这样您就可以 select 假单选按钮在获得焦点时按下回车键。

访问隐藏的输入元素

Accessing hidden input elements

html

css

accessibility