In CSS Is There a Selector for Referencing a Specific Input Type That Also Has a Class

In CSS is there a selector for referencing a specific input type that also has a class?

You want input.some-class[type="text"]

.some-class input looks for input tags that are descendants of .some-class.

input.some-class does the reverse.

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 input[class*=span]

What it means it will select any input which has a class which includes the string "span" ANYWHERE in the class name. Such as:

<input class="span" type="text" value="span" />

<input class="span-3" type="text" value="span-3" />

<input class="span-six" type="text" value="span-six" />

 <input class="myspan" type="text" value="myspan" />

Codepen EXample

Precedence in CSS selector specifity conflicts (type vs class selector)

TL;DR Answer

The first rule is more specific than the second one because it has both a type and attribute part for the selector, and thus has precedence:

input[type="text"] { }         /* type + attribute for specificity */
.top_bar_login_form_input { }  /* only class for specificity, so *less* specificity */

---

Longer answer

You'd think that the type="text" bit, which is an attribute selector, is more specific than a class selector, in accordance with the MDN page on specificity:

The following list of selectors is by increasing specificity:

• Universal selectors
• Type selectors
• Class selectors
• Attributes selectors
• Pseudo-classes
• ID selectors
• Inline style

The above quote was in the MDN article at the time this answer was written.

Why that is misleading:

(Tanks to @BoltClock's insights.)

The above only seems correct, but that's because you typically include the element in the selector (e.g. input[type="text"]) when doing an attribute selector. However, what's sneaky: the input bit matters.

Suppose we have the following markup:

<input class="my-class" type="text" value="some value" />

In the following scenario the input renders red:

[type="text"] { color: green; }
.my-class { color: red; }             /* last rule matched */

If we reverse the rules in a scenario, the input will render green:

.my-class { color: red; }
[type="text"] { color: green; }       /* last rule matched */

This is because both selectors have equal specificity. Now introducing the input selector to the attribute rule will make one of them more specific, which can be seen in this scenario:

input[type="text"] { color: green; }  /* most _specific_ rule matched */
.my-class { color: red; }

The W3 spec makes my head hurt, but it does have the details on why the above works. See also the answer by @BoltClock and comments in those code examples for info on how the specificity is calculated.

CSS Selector for input type=?

Yes. IE7+ supports attribute selectors:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.

Other safe (IE7+) selectors are:

• Parent > child that has: p > span { font-weight: bold; }
• Preceded by ~ element which is: span ~ span { color: blue; }

Which for <p><span/><span/></p> would effectively give you:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Further reading:
Browser CSS compatibility on quirksmode.com

I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.

CSS Selector that applies to elements with two classes

Chain both class selectors (without a space in between):

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

---

If you still have to deal with ancient browsers like Internet Explorer 6, be aware that it doesn't read chained class selectors correctly: it'll only read the last class selector (.bar in this case) instead, regardless of what other classes you list.

To illustrate how other browsers and IE6 interpret this, consider this snippet:

* {
  color: black;
}

.foo.bar {
  color: red;
}

<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

css selector all elements except input type checkbox

All inputs in class dim

.dim input{...........}

All inputs but not of type checkbox

.dim input:not([type=checkbox]){}

so following css works:

.dim input:not([type=checkbox]){
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    filter:alpha(opacity=25);
    opacity: 0.1;
}

http://jsfiddle.net/efpL2/

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

Is it possible to use an input value attribute as a CSS selector?

Dynamic Values (oh no! D;)

As npup explains in his answer, a simple css rule will only target the attribute value which means that this doesn't cover the actual value of the html node.

JAVASCRIPT TO THE RESCUE!

• Ugly workaround: http://jsfiddle.net/QmvHL/

---

Original Answer

Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:

input[value="United States"] { color: #F90; }​

• jsFiddle example

from the reference

• [att] Match when the element sets the "att" attribute, whatever the
  value of the attribute.

• [att=val] Match when the element's "att"
  attribute value is exactly "val".

• [att~=val] Represents an element
  with the att attribute whose value is a white space-separated list of
  words, one of which is exactly "val". If "val" contains white space,
  it will never represent anything (since the words are separated by
  spaces). If "val" is the empty string, it will never represent
  anything either.

• [att|=val] Represents an element with the att
  attribute, its value either being exactly "val" or beginning with
  "val" immediately followed by "-" (U+002D). This is primarily intended
  to allow language subcode matches (e.g., the hreflang attribute on the
  a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
  For lang (or xml:lang) language subcode matching, please see the :lang
  pseudo-class.

• css attribute selectors reference

---

Related Topics