html - 样式时单选按钮丢失选项卡索引

Question

我有一个带有两个输入的单选按钮。我正在使用 css 设计单选按钮的样式。由于我将 display:none 应用于单选按钮，它正在丢失其选项卡索引(无法使用键盘在输入之间切换)。替代方法是什么？

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

我正在设置 span 标签的样式并将 display none 应用于输入。

Answer 1

我认为你需要两件事:

• 将 tab-index="1" 添加到标签中，使其可通过键盘导航。
• 添加 span:focus 样式。

焦点样式由浏览器默认应用于输入元素。

An example with your code :)

更多信息:

Focus selector
HTML tabindex Attribute