Question

在我看来，我有以下EditorFor<>来显示数字属性。我想控制在结果标记中创建的文本框的宽度。

渲染视图时，文本框不是50px。它是300px。 CSHTML中指定的类editor-field-score似乎未应用。我使用开发人员工具检查了Chrome，并且该类未添加到生成的标记中。

这来自我的CSHTML：

<div class="editor-field">
   @Html.EditorFor(model => model.Animal, new { @class = "editor-field-score" })
   @Html.ValidationMessageFor(model => model.Animal)
</div>

这是来自我的CSS：

fieldset input[type="text"].editor-field-score { width : 50px; }

此标记是从Chrome复制的：

<div class="editor-field">
   <input class="text-box single-line" data-val="true" data-val-number="The field XXX must be a number." id="Animal" name="Animal" type="text" value="">
   <span class="field-validation-valid" data-valmsg-for="Animal" data-valmsg-replace="true"></span>
</div>

Answer 1

嗯，你可以这样做：

.editor-field input {
}

作为你的选择者。

否则，您可以使用TextBoxFor，它允许设置HTML Properties，如下所示：

@Html.TextBoxFor(model => model.Animal, new { @class = "editor-field-score" })

如何将CSS应用于EditorFor字段？

1 个答案: