CSS Selector for Text Input Fields

CSS selector for text input fields?

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.

CSS selector for general textboxes

Do saner solutions exist?

How about a good old fashion class?

<input class='text' type='text'>

or overriding the types that are not text

input {
    background: red;
}

input[type=radio], input[type=checkbox], input[type=submit] {
    background: yellow;
}

Additionally:
In my books there is nothing really wrong with your solution.

You just need to add the new html5 input types:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

CSS form input[type=text] selector

I don't really get your question. But you have a few options

Will style every input typed text. <input type="text" />

form input[type="text"] {}

Will style the level first only input typed text

form >input[type="text"] {}

Will style the first only input

form input[type="text"]:first-child {}

Will style the input typed text with class "foo"

form input.foo[type="text"] { }

So. Lets say you have a form

<form action="" method="POST">
<input type="text" name="text" class="foo" />
<input type="text" name="text2" class="bar" />
</form>

This will target all inputs

form input[type="text"] { border:2px solid #000000; }

This will target only the first input with the class "foo"

form input.foo[type="text"] { background-color:red; }

This will target the second input with the class "bar"

form input.bar[type="text"] { background-color:green; }

Click here to view on CodePen

is there a CSS selector for Input field that contains input?

Use the pseudo class :placeholder-shown combined with :not(). The idea is to change the style of the input when there is no placeholder and when there is no placeholder its means you have some content.

The trick only work if there is a placeholder, so make sure you at least an empty one:

input:not(:placeholder-shown) {  background:pink;}

input { border:1px solid;}

<input type="text" placeholder=" ">

How can I target text input fields with CSS?

If you want to be able to omit the type="text" and still have the selector match, you will have to use the not psuedoselector available in CSS3:

input[type="text"], input:not([type]) {
    ...
}

http://jsfiddle.net/dByqP/5/

This will not work in lower versions of IE, as CSS3 is not well supported in those browsers.

The best solution would be to go through and add type="text" to your text inputs and just use your original selector.

Is there a CSS selector that checks if an input has any text in it?

you can try this code

    input:not(:placeholder-shown) {
         border-color: green;
    }

Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

Stylish cannot do this because CSS cannot do this. CSS has no (pseudo) selectors for <input> value(s). See:

The W3C selector spec
The Mozilla/Firefox supported selectors
Cross-browser, CSS3 support table

The :empty selector refers only to child nodes, not input values.

[value=""] does work; but only for the initial state. This is because a node's value attribute (that CSS sees), is not the same as the node's value property (Changed by the user or DOM javascript, and submitted as form data).

Unless you care only about the initial state, you must use a userscript or Greasemonkey script. Fortunately this is not hard. The following script will work in Chrome, or Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (i.e. most browsers, except IE).

See a demo of the limits of CSS plus the javascript solution at this jsBin page.

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

SCSS/CSS selector to select all input types

There are a lot of possible input types. If you want textareas and any input that has a type attribute then...

textarea,
input[type] {
    ...
}

If you want to exclude some input types then use the :not selector.
EDIT EXAMPLE JSFIDDLE http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

But like I said there are probably a lot more types you DON'T want than types you DO want, so you can't really avoid the list.

You could always use a CSS class instead.

.box-shadowed
{
  @include box-shadow(none);
}

Is there a CSS selector for any field that the user types in?

Nope, there isn't.

Either you go with lists

input, textarea {...}

or you use a css-preprocessor (e.g. sass) and make yourself a mixin or a function that handles all these types. But you won't get around defining all these elements at some point.

CSS Selector for Text Input Fields