Question

我想尝试制作自定义单选按钮，但是它们仅适用于Chrome和Opera。

在Edge上，我使用:: after创建的内容是不可见的，但是在其他浏览器上则是可见的。

问题似乎是可见度：隐藏在广播中。在Edge上，其子项消失了，但是在其他浏览器上，其可见性：可见将其带回。

[type=radio] {
  position: relative;
  width: 50px;
  height: 50px;
  visibility: visible;
}

[type=radio]::after {
  width: 50px;
  height: 50px;
  display: inline-block;
  content: "";
  background-color: pink;
  visibility: visible;
  border-radius: 100%;
}

<input type="radio">

Answer 1

在Chrome中单击时，代码段中的单选按钮不会更改。我进行了一个演示，其中单击时单选按钮的background-color将变为粉红色。我在Edge和Chrome中对其进行了测试，并且可以正常工作。您可以检查下面的代码。

input[type="radio"] {
    display: none;
}

input[type="radio"] + label span {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: lightgray;
}

input[type="radio"]:checked + label span {
    background-color: pink;
}

<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span></label>

Microsoft Edge上的CSS可见性

1 个答案: