Styling Texty Inputs Only

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

But then you add a few more inputs, a file input and the submit button, and you get sad face because you didn’t want those styles to affect those elements.

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

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

But then you realize as you build out your form, you want to make use of the new HTML5 input types. Those new input types mean better accessibility, better mobile support, and enhanced desktop browser experiences. 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 */
}

Now you’re back to square one (default user agent stylesheet) on those other 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 do so with a quick copy-and-paste job.

<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

That is from this project which:

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

Not interested in that? Well you could always just list out all the attribute selectors like I listed above, which will get you back to IE7 support. Or, you could go back to just adding class names onto every single input and selecting by that which should take you back to the beginning of the internet.