CODEWITHSUNDEEP
asp.net-mvc
user1469655
user1469655

Reputation: 1091

How do I apply CSS to an EditorFor field?

In my view, I have the following EditorFor<> to display a numeric property. I want to control the width of the textbox created in the resulting markup.

When the view is rendered, the textbox is not 50px. It is 300px. The class specified in the CSHTML, editor-field-score, does not appear to be applied. I checked in Chrome with the developer tools and the class is not added to the resulting markup.

This is from my CSHTML:

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

This is from my CSS:

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

This markup is copied from 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>

Upvotes: 2

Views: 1671

Answers (1)

JasCav
JasCav

Reputation: 34632

Well, you could do:

.editor-field input {
}

as your selector.

Otherwise, you can use TextBoxFor which does allow for the setting of HTML Properties like this:

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

Upvotes: 2

Related Questions