CSS selector for text input fields

Question

How can I target input fields of type  text  using CSS selectors

User · Answer

The attribute selectors are often used for inputs. This is the list of attribute selectors:

[title] All elements with the title attribute are selected.

[title=banana] All elements which have the 'banana' value of the title attribute.

[title~=banana] All elements which contain 'banana' in the value of the title attribute.

[title|=banana] All elements which value of the title attribute starts with 'banana'.

[title^=banana] All elements which value of the title attribute begins with 'banana'.

[title$=banana] All elements which value of the title attribute ends with 'banana'.

[title*=banana] All elements which value of the title attribute contains the substring 'banana'.

Reference: https://kolosek.com/css-selectors/

User · Answer

input type text   This will select all the input type text in a web-page

User · Answer

You can use the attribute selector here    input type  text         font-family  Arial  sans-serif      This is supported in IE7 and above  You can use IE7 js to add support for this if you need to support IE6    See  http   reference sitepoint com css attributeselector for more information

User · Answer

With attribute selector we target input type text in CSS  input type text    background gold  font-size 15px

User · Answer

I usually use selectors in my main stylesheet  then make an ie6 specific  js  jquery  file that adds a class to all of the input types  Example     document  ready function         input type  text     addClass  text          And then just duplicate my styles in the ie6 specific stylesheet using the classes  That way the actual markup is a little bit cleaner

User · Answer

input type text    or  to restrict to text inputs inside forms  form input type text    or  to restrict further to a certain form  assuming it has id myForm   myForm input type text    Notice  This is not supported by IE6  so if you want to develop for IE6 either use IE7 js  as Yi Jiang suggested  or start adding classes to all your text inputs   Reference  http   www w3 org TR CSS2 selector html attribute-selectors    Because it is specified that default attribute values may not always be selectable with attribute selectors  one could try to cover other cases of markup for which text inputs are rendered   input not  type       type attribute not present in markup input type         type attribute present  but empty input type text     type is explicitly defined as  text    Still this leaves the case when the type is defined  but has an invalid value and that still falls back to type  text   To cover that we could use select all inputs that are not one of the other known types  input not  type button   not  type password   not  type submit        But this selector would be quite ridiculous and also the list of possible types is growing with new features being added to HTML   Notice  the  not pseudo-class is only supported starting with IE9

User · Answer

As  Amir posted above  the best way nowadays     cross-browser and leaving behind IE6     is to use   type text       Nobody mentioned lower CSS specificity  why is that important   so far   type text  features 0 0 1 0 instead of 0 0 1 1 with input type text    Performance-wise there s no negative impact at all any more    normalize v4 0 0 just released with lowered selector specificity

User · Answer

You can use  text Selector to select all inputs with type text  Working Fiddle    document  ready function              text   css        or    input text            background    green            color    fff                 text is a jQuery extension and not part of the CSS specification  queries using  text cannot take advantage of the performance boost provided by the native DOM querySelectorAll   method  For better performance in modern browsers  use  type  text   instead  This will work for IE6        type text    css       or    input type text         background    green        color    fff        CSS   type text     or input type text         background  green

User · Answer

I had input type text field in a table row field  I am targeting it with code   admin table input type text  focus       background-color   FEE5AC

[html] CSS selector for text input fields?

Examples related to html

Examples related to css

Examples related to forms

Examples related to css-selectors

Examples related to html-input