css: overriding input[type="text"]

css, input

Solution

Write a more specific selector.

e.g.

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

Problem

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.

Original source