Circular outline for radio input-CodePudding

I am using a HTML radio input rather than building my own. Normally I would use box-shadow for setting a focus style so that it matches the border-radius. When I try the box-shadow approach and set the border-radius to 100%, it doesn't work - it's a rectangle.

For that reason I am using outline:

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

Is there any way to make it a circle?

CodePudding user response：

No; outlines cannot be made into a circle.

To solve your problem in a cross-browser way, you would have to do quite a few things:

find a way to get a radio button to appear in a consistent way - this normally involves hiding the original one with clip() and styling a label attached to it
perhaps creating an extra div to provide the border / border-radius to "outline" it

As you might guess, this is quite an involved process.

Instead, you might prefer to use a library for the radio buttons instead, like https://baseweb.design/components/radio/

CodePudding user response：

Use The ::before and ::after selector approach to make perfact circle

Attache snippet will help you

.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  required="" name="gender" type="radio" value="male" aria-required="true">     
      <span ></span>
      Yes 
  </label>
<br>
  <label>
    <input  required="" name="gender" type="radio" value="male" aria-required="true">     
    <span ></span>
    No 
</label>