Styling Texty Inputs Only

by: Chris Coyier

Let's say you want fancy styling your your text inputs:

So you go and style those inputs:

input {
    border: 5px solid white;
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

Butthen you add a few more inputs, a file input and the submit button, andyou get sad face because you didn't want those styles to affect thoseelements.

So then you are like no-prob-bob, I'll just make sure to only style text inputs!

input[type=text] {
   /* Awesome styling */
}

Butthen you realize as you build out your form, you want to make use ofthe new HTML5 input types. Those new input types mean betteraccessibility, better mobile support, and enhanced desktop browserexperiences. There is type=email, type=url, type=tel, type=number, type=color, and a bunch more! This is going to get cumbersome...

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email], {
   /* And that ain't all of them... */
}

What are we to do? Well my favorite way would be to harness CSS3 and the :not() selector. So instead of including all the new types, we exclude the ones we don't want styled.

input:not([type=submit]):not([type=file]) {
   /* omg so much cleaner */
}

Nowyou're back to square one (default user agent stylesheet) on thoseother inputs. Don't be afraid to use browser default form controls,people know them and are used to them.

But hold on there hotpants. IE doesn't support that :not()selector until version 9, which isn't even really out yet. Yes indeed,and that sucks. However, if you want to polyfix that sucka you could doso with a quick copy-and-paste job.

That is from this project which:

Upgrade[s] MSIE5.5-8 to be compatible with modern browsers.

Notinterested in that? Well you could always just list out all theattribute selectors like I listed above, which will get you back to IE7support. Or, you could go back to just adding class names onto everysingle input and selecting by that which should take you back to thebeginning of the internet.