样式时单选按钮丢失选项卡索引答案

【问题标题】：Radio button losing tab index when styling样式时单选按钮丢失选项卡索引
【发布时间】：2018-09-27 12:07:16
【问题描述】：

我有一个带有两个输入的单选按钮。我正在使用 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 应用于输入。

【问题讨论】：

给它一个左边的位置：-9999
添加标签索引="1"
尝试opacity: 0.001，它可能会保留标签索引
这实际上不是引导程序吗？如果是，您需要对其进行标记。

标签： html css radio-button

【解决方案1】：

我认为你需要两件事：

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

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

An example with your code :)

更多信息：

Focus selector
HTML tabindex Attribute

【讨论】：

【解决方案2】：

将display: none 更改为opacity: 0 并且有效。

【讨论】：

【解决方案3】：

将 display: none 更改为 opacity: 0 和 position: absolute 以将其从文档流中删除。（使用箭头更改选中的单选按钮）

【讨论】：