Well, there are a few options you can take:
Wrap items in a class.
Wrap all your div inputs and target your styles to div instead of .editor-label and .editor-field .
So HTML
<label class="editor-label">blah</label> <input class="editor-field" />
becomes
<div class="editor"> <label class="editor-label">blah</label> <input class="editor-field" /> </div>
And your CSS
.editor-label { } .editor-field { }
becomes
.editor label { } .editor input, .editor select { }
Add them back using JavaScript
You may be able to avoid using JavaScript to add classes.
Demo on jsFiddle
var content = document.getElementById('content'); var labels = content.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { labels[i].classList.add('editor-label'); var id = labels[i].getAttribute('for'); var input = document.getElementById(id); input.classList.add('editor-field'); }
Edit Editor Templates
I wrote a blog post about how to modify the display and editor templates a few months ago, allowing you to output custom HTML from HtmlHelper.EditorFor() and HtmlHelper.DisplayFor() . This will allow you to return the classes to where they were. This method may be more of a problem than it costs for your situation.
Basically, you can put a custom view in the location Views/Shared/EditorTemplates/ named depending on the type you want to override, for example string.cshtml for string . An example for string could be:
string.cshtml
@model string @{ var id = ViewData.TemplateInfo.GetFullHtmlFieldId(Model); } <label class="editor-label" for="@id"></label> <input type="text" class="editor-field" id="@id" />
Go to htmlAttributes
You cannot pass a class to the htmlAttributes argument to EditorFor() , but you can use for LabelFor() and TextBoxFor() , etc. You can change all instances of EditorFor() to the appropriate types and provide classes in the call.
@Html.LabelFor(e => e.UserName, new { @class="editor-field" }) @Html.TextBoxFor(m => m.UserName, new { @class="editor-field" })
Further reading