Css: переопределяющий ввод [type = "text" ]

CSS выглядит так:

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

.small 
{
  width: 50px;
}

У меня есть текстовые поля, которые мне бы хотелось меньше. Я пробовал несколько разных вещей, но не могу понять, как получить заданное поле ввода, скажем, ширину 50.

Текстовое поле отображается с помощью:

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

Атрибут размера игнорируется, а .small не отменяет ввод.

Ответ 1

Напишите более конкретный селектор.

например.

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

Ответ 2

Проблема заключается в том, что псевдоклассы считаются классом. Таким образом, [type = text] (псевдокласс) имеет равную специфичность для .small, а затем ширина: 200px выигрывает из-за добавления ввода.

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 */

Вам, вероятно, понадобится

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

(согласно http://www.w3.org/TR/CSS21/cascade.html#specificity)

Ответ 3

Вы не указали много информации, но я предполагаю, что у вас есть проблемы специфики css. Попробуйте установить правило css для следующего:

input[type="text"].myClassWithSmallerWidth