css: overridding input[type="text"]

Question

CSS looks like:

input[type="text"]
{
  width: 200px;
}

.small 
{
  width: 50px;
}

I have some text fields that I'd like smaller. I've tried a few different things, but can't figure out how to get specify an input field with, say, width 50.

Textbox is rendered with:

  <%= Html.TextBox("Order","",new { @class="small", size = 5 } ) %>

Size attribute is ignored, and .small doesn't override the input.

Answer 1

Write a more specific selector.

e.g.

input[type="text"].foo
{
  width: 50px;
}

Answer 2

You haven't given much information, but my guess is that you're having css specificity issues. Try setting a css rule for the following:

input[type="text"].myClassWithSmallerWidth