MVC中EditorFor生成的整数类型文本框样式与字符串类型不一致问题

嘿，这个问题我之前也碰到过！MVC的EditorFor会根据属性的数据类型自动渲染不同的HTML控件：字符串类型默认生成type="text"的输入框，而整数类型会生成type="number"的输入框。不同浏览器对number类型输入框有自带的默认样式（比如右侧的上下调节箭头），这就导致了两种输入框外观不统一。

下面给你几个可行的解决方案：

1. 强制将整数输入框渲染为text类型 #

直接指定输入框的type为text，让整数类型的输入框和字符串类型保持一致。你可以选择两种方式：

• 使用TextBoxFor替代EditorFor，更直接地控制控件类型：

  <td> @Html.LabelFor(model => model.Id, "Project Id", new { @class = "control-label" }) </td>
  <td> @Html.TextBoxFor(model => model.Id, new { @class = "form-control", type = "text" }) </td>
  

  注意这里的@class要和你字符串类型输入框使用的样式类保持一致（比如示例中的form-control，替换成你实际项目里的类名）。
• 或者继续使用EditorFor，通过htmlAttributes参数指定类型：

  <td> @Html.LabelFor(model => model.Id, "Project Id", new { @class = "control-label" }) </td>
  <td> @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control", type = "text" } }) </td>
  

2. 用CSS统一两种输入框的外观 #

如果你不想修改控件类型，可以通过CSS覆盖number类型输入框的默认样式，去掉自带的箭头，并确保所有输入框应用相同的样式：

/* 移除webkit内核浏览器（Chrome、Safari等）的上下箭头 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 移除Firefox的上下箭头 */
input[type=number] {
    -moz-appearance: textfield;
}
/* 确保所有输入框应用统一的样式类 */
.form-control {
    /* 这里写你项目中输入框的统一样式，比如边框、 padding、字体等 */
    border: 1px solid #ccc;
    padding: 6px 12px;
    font-size: 14px;
}

3. 自定义编辑器模板（适合多处需要统一的场景） #

如果你的项目中有很多整数类型属性需要统一样式，可以创建自定义的编辑器模板，让EditorFor渲染整数类型时使用和字符串相同的模板：

1. 在你的项目中创建Views/Shared/EditorTemplates文件夹（如果没有的话）
2. 在该文件夹下新建Int32.cshtml文件，内容如下：

   @model int?
   @Html.TextBox("", Model, new { @class = "form-control" })
   

3. 之后所有使用EditorFor渲染整数类型属性的地方，都会自动使用这个模板，和字符串类型的输入框样式保持一致。

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