css: переопределение ввода [type = "text"]

Question

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

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

.small 
{
  width: 50px;
}

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

Текстовое поле отображается с:

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

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

Answer 1

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

, например

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

Answer 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)

Answer 3

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

input[type="text"].myClassWithSmallerWidth