样式时单选按钮会丢失标签索引

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

Answer 2

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