Blazor Server中动态修改输入框边框色，避免覆盖默认聚焦样式

直接用内联style绑定border-color会和浏览器默认的:focus伪类样式冲突，改成CSS类控制状态就能解决，步骤如下：

1. 定义状态控制的CSS样式 #

在组件的<style>标签里添加以下样式，覆盖不同状态下的边框和聚焦效果：

.input-validation {
    border: 1px solid #ced4da; /* 默认灰色边框，和浏览器默认对齐 */
}

.input-validation:focus {
    /* 默认聚焦样式，可根据需求调整 */
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 格式正确状态 */
.input-validation.valid {
    border-color: #198754;
}
.input-validation.valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* 格式错误状态 */
.input-validation.invalid {
    border-color: #dc3545;
}
.input-validation.invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

2. 修改Razor输入框代码 #

把内联style换成动态绑定CSS类，同时用@oninput替代@onkeyup（能捕获粘贴等非键盘输入）：

<td>
    <input type="text" 
           class="input-validation @validationClass" 
           @bind="PLC_VAR_name" 
           @bind:event="oninput" 
           @oninput="CheckPLCVarName" />
</td>

3. 调整校验逻辑代码 #

在组件的C#代码里维护校验状态类，根据输入内容切换状态：

private string PLC_VAR_name { get; set; } = string.Empty;
private string validationClass = string.Empty;

private void CheckPLCVarName(ChangeEventArgs e)
{
    var inputValue = e.Value?.ToString() ?? string.Empty;

    if (string.IsNullOrWhiteSpace(inputValue))
    {
        // 空输入时回到默认样式
        validationClass = string.Empty;
    }
    else if (IsFormatValid(inputValue)) // 替换成你的实际格式校验逻辑
    {
        validationClass = "valid";
    }
    else
    {
        validationClass = "invalid";
    }
}

// 示例校验方法，根据你的需求修改规则
private bool IsFormatValid(string value)
{
    // 比如校验是否为字母数字组合
    return System.Text.RegularExpressions.Regex.IsMatch(value, @"^[a-zA-Z0-9]+$");
}

效果说明 #

• 输入框未输入内容时，保持默认样式，聚焦时显示默认的聚焦边框
• 输入内容后，格式正确则边框为绿色（聚焦时也是绿色阴影），错误则为红色（聚焦时红色阴影）
• 完全避免了默认聚焦样式和自定义边框的重叠问题

内容的提问来源于stack exchange，提问作者Mdarende