Input [type = 'text'] The CSS selector is not applied to text inputs by default.

Question

The default input type is text. I have always assumed that input[type='text'] oriented CSS input[type='text'] CSS declarations will affect these inputs, even if the type was not explicitly declared in the control. However, I only noticed that my text attachments do not get styles by default. Why is this so? And how can I solve this?

CSS

 input[type='text'] { background:red; } 

HTML

 <input name='t1' type='text'/> /* Is Red */ <input name='t1'/> /* Is Not Red */ 

http://jsfiddle.net/LhnNM/

Answer 1

CSS uses only the data in the DOM tree, which has little to do with how the rendering decides what to do with elements with missing attributes.

So let CSS reflect HTML

 input:not([type]), input[type="text"] { background:red; } 

or make HTML explicit.

 <input name='t1' type='text'/> /* Is Not Red */ 

If it is not, you can never tell

 element { ...properties... } 

and

 element[attr] { ...properties... } 

because all attributes will always be defined for all elements. (For example, table always has a border attribute, and 0 is the default attribute.)

Answer 2

According to CSS specifications, browsers may or may not use default attribute information; mostly not. Corresponding Proposition in CSS 2.1 Specification 5.8.2 Attribute Defaults in DTD . In CSS 3 Selectors, its sentence is 6.3.4 with the same name. He recommends: "Selectors must be designed to work regardless of whether the default values ​​are included in the document tree."

As a rule, it is better to explicitly specify basic attributes such as type=text instead of defaulting them. The reason is that there is no easy reliable way to refer to input elements with the default type attribute.

Answer 3

Because it is not intended .

input[type=text] { } is an attribute selector and will select only this element with the corresponding attribute.

Answer 4

To be compatible with all browsers, you should always specify the type of input.

Some browsers will use the default type as “text,” but this is not a good practice.

Answer 5

try it

  input[type='text'] { background:red !important; }