css: overriding 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

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 )