禁用方形邊框 InputRadioGroup

Question

當使用 Blazor InputRadioGroup 組件時，選擇后，在所有選項中繪制一個方形邊框 - 是否可以禁用此功能，示例：

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

我嘗試了全局 CSS，重新啟動應用程序，什么也沒有。

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

提前致謝

Answer 1

設置此代碼：

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

或者

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

Answer 2

綠色邊框的原因是因為當你新建一個 Blazor 應用程序時，模板在 site.css 文件中有這個 css 文件：

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

從單選按鈕中刪除邊框的一種方法是添加:not([type=radio]) ，如下所示：

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