禁用方形边框 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

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;
}

Answer 2

The reason for the green border is because when you create a new Blazor app, the template has this css in the site.css file:

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

One way to remove the border from radio buttons would be to add :not([type=radio]) to it like this:

.valid.modified:not([type=checkbox]):not([type=radio]) {
    outline: 1px solid #26b050;
}