Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 */
like image 973
Yarin Avatar asked Mar 07 '12 15:03

Yarin


People also ask

How do you target input text in CSS?

If you only want to style a specific input type, you can use attribute selectors: input[type=text] - will only select text fields. input[type=password] - will only select password fields. input[type=number] - will only select number fields.

Which is not a type of CSS selector?

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. The :not() pseudo-class has a number of quirks, tricks, and unexpected results that you should be aware of before using it.

Which of the following is correct to input text?

Answer: The <input> element is used to create form fields that accept user input.


2 Answers

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

like image 71
Mr Lister Avatar answered Oct 12 '22 06:10

Mr Lister


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.

like image 41
Starx Avatar answered Oct 12 '22 07:10

Starx