c# - Disabled square border InputRadioGroup

Question

When use a Blazor InputRadioGroup component, after choice, a square border is drawn in all options - Can it disabled this, sample:

@page "/RatioButtons"
<h3>Ratio Buttons</h3>
<div>
    <EditForm Model="person">
        <InputRadioGroup Name="age" @bind-Value="person.Age">
            Set Age:<br />
            @for (int i = 18; i < 36; i++) {
                <InputRadio Value="@i" />
                @($" Age {i}")<br />
            }
        </InputRadioGroup>
    </EditForm>
</div>
<br />
<div class="card p-3" >
    <h5>@person.FirstName @person.LastName : @person.Age</h5>
</div>

@code {
    class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }

    Person person = new Person {
        FirstName = "Alexa",
        LastName = "Ansley",
        Age = 24
    };
}

I tried global CSS, restart application, and nothing.

input[type="radio"]:focus {
    outline: none !important;
}

Thanks in advance

question from:https://stackoverflow.com/questions/65865893/disabled-square-border-inputradiogroup

Answer 1

set this code:

@for (int i = 18; i < 36; i++) {
     <InputRadio Value="@i" style="border:none;"/>
     @($" Age {i}")<br />
}

or

 input[type="radio"]:focus {
   border: none !important;
}