css - 输入[类型= radio ] :before radio sticking out

Question

圆形边缘刚好从正方形或圆形中伸出，因此如果我在 before 之前提供白色背景，则 radio 边缘仍然略微可见。

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
}

> <input type="radio" name="r" checked>

如何使用 css before 完全隐藏单选按钮？

Answer 1

我认为使用 visibility:hidden 可能会有帮助，请检查以下内容:

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  visibility: hidden;
 
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  
}
input[type=radio]:checked:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    /* border: 2px solid green; */
    border-radius: 50%;
    background-color: green;
    position: absolute;
    top: 5px;
    left: 5px;
    visibility: visible;
}

<input type="radio" name="r" checked>