禁用方形边框 InputRadioGroup答案

【问题标题】：Disabled square border InputRadioGroup禁用方形边框 InputRadioGroup
【发布时间】：2021-04-28 03:27:42
【问题描述】：

当使用 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;
}

提前感谢

【问题讨论】：

试试这个链接会有帮助 > stackoverflow.com/questions/23025695/…
大纲：无； ...没有工作。

标签： c# css blazor

【解决方案1】：

设置此代码：

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

或

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

【讨论】：

没用 :_( ...但是你给了我一个想法：我创建了 CSS: .out-border { outline: none !important; border: none !important; .out-border: focus { border: none !important; outline: none !important; }。然后，效果很好！（CSS 鉴赏家一定会微笑）

【解决方案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;
}

【讨论】：