CSS Selector for <Input Type=""

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

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

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

CSS Input Type Selectors - Possible to have an or or not syntax?

CSS3 has a pseudo-class called :not()

input:not([type='checkbox']) {    
    visibility: hidden;
}

<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
                                      
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>       
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>

input[type="submit"].wysija-submit  {    border-radius: 10px;    border: none;    box-shadow: none;    font-family: inherit;    font-size: 50px!important;}

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">

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

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

input:not([type]), input[type="text"]
{
background:red;
}

<input name='t1' type='text'/> /* Is Not Red */

element { ...properties... }

element[attr] { ...properties... }

select {
    /* blah blah blah*/
}