Question

I have a pretty basic form that i render from a view using a model.
In this form I have som text inputs like this:

<div class="editor-label">
     @Html.LabelFor(model => model.UserProfile.FirstName)
</div>
<div class="editor-field">
     @Html.TextBoxFor(model => model.UserProfile.FirstName)
     @Html.ValidationMessageFor(model => model.UserProfile.FirstName)
</div>

When this is rendered on the webpage it contains this nasty inline style:

<input 
id="UserProfile_FirstName" 
name="UserProfile.FirstName" 
type="text" 
value="xxx"
sourceindex="4" 
style="border-style: solid; border-width: 1px; 
    border-color: rgb(238, 50, 50) rgb(240, 80, 80) rgb(240, 80, 80); 
    box-shadow: rgb(250, 230, 230) 1px 1px inset; 
    -webkit-box-shadow: rgb(250, 230, 230) 1px 1px inset;">

I’v tried several approaches for removing this, including

@Html.TextBoxFor(model => model.UserProfile.LastName, null, 
{ @style = "border-width: 0px;" })

And similar, but the inline styles that i add are added before the styles i want to remove so they are overwritten.

How can I remove or overide this inline style?

Answer 1

I don’t think this is the default behavior of the TextBoxFor helper. Do you have any jQuery plugins running on the page? Especially one that might inject an inline style like this one?