无线电输入用圆形轮廓

Question

我使用的是HTML无线电输入，而不是构建自己的。通常，我会使用框影来设置焦点样式，使其与边框半径匹配。当我尝试框影方法并将边框半径设置为100%时，它不工作--它是一个矩形。

为此，我使用大纲：

input[type=radio]:focus-visible {
  outline: auto 2px #1DA2BD;
}

https://codepen.io/cssgrid/pen/jOYmxyQ

轮廓是一个略显怪异的圆形方形，而不是一个圆形.

​

​

有什么办法让它成为一个圆圈吗？

Answer 1

不，轮廓不能成一个圆。

要以跨浏览器的方式解决问题，您必须做很多事情：

• 找到了一种使单选按钮以一致的方式出现的方法--这通常包括隐藏带有clip()的原始按钮，并为其添加一个附加
• 的标签，可能会创建一个额外的div来提供边框/边框半径来“勾勒”it

。

正如您可能猜到的，这是一个相当复杂的过程。

相反，您可能更喜欢为单选按钮使用库，比如https://baseweb.design/components/radio/。

Answer 2

使用：：之前和::after选择器方法进行圆周

武官片段会帮你的

​

.dinput-radio--input {
    opacity: 0;
    z-index: -1;
    position: absolute;
}

.dinput-radio--control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    border: 6px solid #cccccc;
    transition-property: border-color;
    transition-duration: 0.3s;
}
.dinput-radio--control::after {
    content: '';
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    background-color: #1ba1bc;
    transition-property: opacity;
    transition-duration: 0.3s;
}

.dinput-radio--control::before {
    content: '';
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    transition-duration: 0.3s;border: 4px solid #1ba1bc;
}


.dinput-radio--input:checked ~ .dinput-radio--control {
    border-color: #1ba1bc;
}

.dinput-radio--input:checked ~ .dinput-radio--control::after {
    opacity: 1;
}
.dinput-radio--input:checked ~ .dinput-radio--control::before {
    opacity: 1;
}

    <label>
      <input class="dinput-radio--input" required="" name="gender" type="radio" value="male" aria-required="true">     
      <span class="dinput-radio--control"></span>
      Yes 
  </label>
<br>
  <label>
    <input class="dinput-radio--input" required="" name="gender" type="radio" value="male" aria-required="true">     
    <span class="dinput-radio--control"></span>
    No 
</label>

​