css: overriding input[type="text"]

CSS looks like:

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

.small 
{
  width: 50px;
}

I have some te开发者_开发问答xt 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.

Write a more specific selector.

e.g.

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

The problem is that pseudo classes count as a class. So [type=text] (a pseudo-class) has equal specificity to .small, and then the width:200px wins over because of the addition of the input.

input[type=text]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
.small{}           /* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */

You'll probably need

input[type=text].small, .small {width:50px;}

(As per http://www.w3.org/TR/CSS21/cascade.html#specificity )

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