Scss/CSS Selector to Select All Input Types

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

Styling a specific set of input types in a reusable way with Sass

Your problem might better be solved by using variables to contain your selectors. By using a mixin, you're losing the ability to chain it with similar elements.

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]';
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button';
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]';
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])';

#{$form-input-text}, textarea {
    @include border-radius(.25em);
    border: $form-input-border;
}

#{$form-input-text}, textarea, input[type="file"] {
    width: $form-input-width;
    max-width: 100%;
    -webkit-appearance: textfield
}

#{$form-input-buttons} {
    padding: .25em .5em;
}

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

CSS multiple input[type] selectors

Yep, you've got it round the wrong way. The selector is to search within a space seperated list.. i.e.

<element attribute="text password" />

you could find using:

element[attribute~="text"]

The benefit of this is that it shouldn't match:

<element attribute="textual password" />

To achieve what you're actually trying to do is a bit more verbose:

input[type="text"], input[type="password"]

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.

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.

How to select all inputs except type=value?

Using the :not() selector with the attribute selector, you can exclude type="submit" from your rule.

input:not([type="submit"]) {  color: red;}

<input type="text" name="firstname" value="First Name" title="Type your First Name" onfocus="this.value='';"><input type="text" name="lastname" value="Last Name" title="Type your Last Name"><input type="email" name="email" value="user@email.com" title="Type your email"><input type="tel" name="phone" pattern="^\(?:\(\d{2}\)|\d{2})[\d{1}][. ]?\d{4}[- ]?\d{4}" value="(xx)x.xxxx-xxxx" title="Type your phone number"><input type="age" pattern=".{2,3}" name="idade" value="Age" title="Idade"><input type="submit" value="Submit">

---

Related Topics