Kiran Dash Kiran Dash - 2 months ago 12
CSS Question

Accessing hidden input elements

My question:
How to access hidden input elements via tab?

Detailed explanation:

On my website, for radio buttons I have set visibility none and customized the before element to get a custom design.

The problem is when I try to access the input type radio via tab I am unable to do it since it is visibility hidden.

So, can anyone suggest me how to access hidden input elements with tab?

Website

Demo Form

Please visit the link above, you will find a form there. Now, please try to access the radio buttons with tab. It skips the radio buttons.

Answer

You have to have an item in your tab flow that supports tabindex, and since your radio button is hidden that won't work. The anchor tag does support tab index however, so you can wrap the inner elements of each of your li tags with an a tag, and assign it a tabindex that works in your flow...

Change:

<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>

To:

<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>

This will give the anchor tag focus when you tab to it (assuming the previous element's tabindex is '1009' or lower).

This is answers your question on how to tab to it. Now that you have that, you'll need to do a couple things:

  1. Style the element's css for form li.radio a:focus as you see fit.
  2. Set up key press events for the a elements so that you can actually select your fake radio button with the enter key press when it's focused.
Comments