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

CssCss Selectors

Css Problem Overview

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;
}


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

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

Because, it is not supposed to do that.

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

Solution 3 - Css

By CSS specifications, browsers may or may not use information about default attributes; mostly the don’t. The relevant clause in the CSS 2.1 spec is 5.8.2 Default attribute values in DTDs. In CSS 3 Selectors, it’s clause 6.3.4, with the same name. It recommends: “Selectors should be designed so that they work whether or not the default values are included in the document tree.”

It is generally best to explicitly specify essential attributes such as type=text instead of defaulting them. The reason is that there is no simple reliable way to refer to the input elements with defaulted type attribute.

Solution 4 - Css

To be compliant with all browsers you should always declare the input type.

Some browsers will assume default type as 'text', but this isn't a good practice.

Solution 5 - Css

try this

 input[type='text']
 {
   background:red !important;
 }
Categories
Recommended Css Solutions
Recommended Css Selectors Solutions

Previous Solution:

How can I pre-toggle a button in Bootstrap's btn-group?

JqueryTwitter Bootstrap

Next Solution:

How to support both iPad and iPhone retina graphics in universal apps

IphoneIosIpadRetina Display

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionYarinView Question on Stackoverflow
Solution 1 - CssMr ListerView Answer on Stackoverflow
Solution 2 - CssStarxView Answer on Stackoverflow
Solution 3 - CssJukka K. KorpelaView Answer on Stackoverflow
Solution 4 - CssaguanteView Answer on Stackoverflow
Solution 5 - Cssazzeth_alhavizhView Answer on Stackoverflow