css: anulando entrada [type = "text"]

Question

CSS que parece:

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

.small 
{ 
    width: 50px; 
} 

Tengo algunos campos de texto que me gustaría más pequeño. He intentado algunas cosas diferentes, pero no puedo encontrar la manera de llegar especificar un campo de entrada con, por ejemplo, el ancho de 50.

cuadro de texto se representa con:

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

atributo de tamaño se ignora, y. small no anula la entrada.

Answer 1

Escribe un más specific selector.

p. Ej.

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

Answer 2

No ha dado mucha información, pero mi conjetura es que usted está teniendo css specificity issues. Intente establecer una regla css para lo siguiente:

input[type="text"].myClassWithSmallerWidth 

Answer 3

El problema es que las pseudo clases cuentan como clase. Así que [tipo = texto] (una pseudoclase) tiene la misma especificidad que .small, y luego el ancho: 200px gana debido a la adición de la entrada.

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

es probable que tengas

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

(Según http://www.w3.org/TR/CSS21/cascade.html#specificity)