'Radio button losing tab index when styling

I have a radio button with two inputs. I am styling the radio button using css. Since i am applying display:none to the radio button it is losing its tab index( not able to toggle between the input using keyboard ). What is the alternate method ?

            <div class="col-md-12 cargo-shape">
                <span>
                    <div class="radio-btn image-radio text-uppercase">
                        <label>
                            <input formControlName="cargo_shape" type="radio" [value]="cargoShapes.package">
                            <span></span> <!-- radio button styling -->                                
                            <div class="label-text">{{ 'SPRINT3.PACKAGE' | translate }}</div>
                        </label>
                    </div>
                </span>
                <span class="mx-4">
                    <div class="radio-btn image-radio text-uppercase">
                        <label>
                            <input formControlName="cargo_shape" type="radio" [value]="cargoShapes.container">
                            <span> </span>
                            <!-- radio button styling -->
                            <div class="label-text"> {{ 'SPRINT3.CONTAINER' | translate }}</div>
                        </label>
                    </div>
                </span>
            </div>

i am styling the span tag and applying display none to input.

htmlcssradio-button


Solution 1:[1]

I think you need two things:

  • Add tab-index="1" to tags to make it navigatable by keyboard.
  • Add span:focus styles.

The focus styles are applied by browser by default on input elements.

An example with your code :)

More info:

Focus selector
HTML tabindex Attribute

Solution 2:[2]

Change display: none to opacity: 0 and position: absolute to remove it from the document flow. (Use the arrows to change the selected radio button)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 decabeza
Solution 2

Related Questions