如何为ASP.NET MVC中的HTML Helper添加CSS样式

我有如下HTML Helper代码：

<p>@Html.EditorFor(model => model.NameUser)</p>

运行后会生成一个常规的文本输入框，想要为其添加CSS样式，比如设置输入框背景为蓝色、圆角15px，该如何操作？

方法一：直接通过EditorFor的参数指定CSS类（ASP.NET MVC 5+适用） #

在EditorFor方法中传入htmlAttributes参数，直接定义输入框的CSS类：

<p>@Html.EditorFor(model => model.NameUser, new { htmlAttributes = new { @class = "custom-input" } })</p>

然后在样式表中编写对应类的样式：

.custom-input {
    background-color: blue;
    border-radius: 15px;
    /* 可补充其他样式优化显示 */
    color: #fff;
    padding: 8px 12px;
    border: none;
}

方法二：通过模型注解+自定义编辑器模板实现 #

如果需要对同类型的所有输入框统一应用样式，可以创建自定义编辑器模板：

1. 在项目的Views/Shared/EditorTemplates目录下新建String.cshtml文件（针对字符串类型字段）：

@model string
<input type="text" 
       id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" 
       name="@ViewData.TemplateInfo.GetFullHtmlFieldName("")" 
       value="@Model" 
       class="custom-input" />

2. 之后使用Html.EditorFor(model => model.NameUser)时，会自动调用这个模板，生成带有custom-input类的输入框，再配合上述CSS样式即可生效。

方法三：通过父元素选择器间接设置样式 #

如果不想修改后端代码，也可以利用CSS的父元素选择器定位输入框：

/* 仅针对p标签下的输入框生效 */
p input {
    background-color: blue;
    border-radius: 15px;
}

注意：这种方式会作用于页面中所有p标签下的输入框，若需精准定位，可给父p标签添加类名后再选择。

内容的提问来源于stack exchange，提问作者Nguyễn Tiến Sử