input[type='text'] CSS selector does not apply to default-type text inputs?

Question

The default input type is 'text'. I have always assumed then that CSS declarations targeting `input[type='text']` would affect those inputs even if the type was not explicitly declared on the control. However, I just noticed that my default-type text inputs do not get the styles. Why is this the case? And how can I address this? ``` input[type='text'] { background: red; } ``` ``` /* Is Red */ /* Is Not Red */ ```

Accepted Answer

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

So either let the CSS reflect the HTML

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

or make the HTML explicit.

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

If it didn't do that, you'd never be able to distinguish between

```
element { ...properties... }
```

and

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

because all attributes would always be defined on all elements. (For example, `table` always has a `border` attribute, with `0` for a default.)

input[type='text'] CSS selector does not apply to default-type text inputs?

Solution

Problem