Question

I know this post is probably identical to many others (for example How to set the width of the text box when using Html.TextBoxFor) but I am having real trouble assigning a CSS class to a textbox.

My CSS is simple:

.myInput {
         width: 12em;
        border-color: red;   
    }

And my textbox is declared using:

@Html.TextBoxFor(model => model.DepostAmount, new {@class= "myInput"})

However the textbox is not styled any differently. Looking at the source of the page, I can see that the class is indeed included within the objects markup:

<input class="myInput" id="DepostAmount" name="DepostAmount" type="text" value="" />

I can also see the CSS for .myInput is being rendered too.

Answer 1

I figured it out. In the sample application generated by visual studio, there was a selector selecting all inputs which was overriding my own css class.

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}