Microsoft Edge 上的 CSS 可见性

Question

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

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

问题似乎是 visibility :隐藏在 radio 上。在 Edge 上它的 child 消失了，但在其他浏览器上 visiblity:visible 把他们带回来。

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