73

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

1
  • 6
    CSS selectors target the attribute on the tag and not its default assumption. Mar 7, 2012 at 15:05

5 Answers 5

116

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

11
  • 11
    input:not([type]), input[type="text"] to cover both cases.
    – BoltClock
    Mar 7, 2012 at 21:14
  • @BoltClock Yes; I hadn't thought of that.
    – Mr Lister
    Mar 7, 2012 at 21:17
  • Never knew about input:not([type]) selector- solves my problem right there
    – Yarin
    Mar 8, 2012 at 22:23
  • I would argue that it is mostly an HTML/DOM problem, rather than a CSS one. In HTML, <table><tr></tr><table> implicitly becomes <table><tbody><tr></tr></tbody></table>, so it is quite strange that <input> does not implicitly become <input type="text"> in the DOM.
    – Kal
    Jun 25, 2014 at 1:39
  • 1
    @Kal Not strange; those are simply different cases. The definition of HTML is very precise about this: the tbody element is defined specifically as being mandatory, but having an optional start tag. Or in other words, the tbody is there, even if you don't have <tbody> in your HTML source. The type attribute in input on the other hand, is not mandatory. And the behaviour of input without type happens to be the same as input with type='text, but that is coincidental, and that has nothing to do with the DOM tree.
    – Mr Lister
    Jun 25, 2014 at 6:09
7

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.

7

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.

2
  • +1, notice how the word "must" is never used anywhere in this section (except within an example to describe a different cascading issue).
    – BoltClock
    Mar 7, 2012 at 21:23
  • What is important is actual browser behavior. And it seems that no browser does that.....
    – Pacerier
    Oct 10, 2014 at 1:43
0

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.

1
  • 5
    This answers the question how?
    – BoltClock
    Mar 7, 2012 at 21:21
-1

try this

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.