Grow your CSS skills. Land your dream job.

Styling Texty Inputs Only

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

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="http://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.

Comments

  1. no matter how much one would want to, one canNOT ignore IE – and those countless millions of poor corporate souls stuck on using IE with disabled js support. i wish i could use this, but sadly can’t :(

    • and hey chris, what’s with the refreshing page for a comment submission? i figured you’d use some sexy AJAX goodness to submit comments seamlessly :)

    • Within an intranet, you don’t really need the fancy shit described in this blog post… so feel free to build with CSS 0.01 and web 1.0 table madness sans JS.

      Websites built for general purpose WWW use, on the other hand, CAN and SHOULD be built without IE6 support.

      Be a man, and just say NO. Do it for the children.

    • @Mark, being a ‘usability’ expert as your Twitter implies, I’m sure you’re only joking ;)

    • peter
      Permalink to comment#

      +1 for Jayphen
      My thoughts exactly…

    • +1 for Mark
      My thoughts exactly…

    • Permalink to comment#

      +6.022 E23 for Mark. Precisely my thoughts.

      Oh, and are we only limited to giving +1’s? I wasn’t sure if giving an entire “mole” quantity of pluses to Mark was legit / legal … Hope no one yells at me here.

    • Gavin
      Permalink to comment#

      If its too much for these companies to upgrade IE because of legacy systems ect… Then they need to invest in virtual systems that can run those legacy apps and still be up with the times.

      There is no way a company should be stuck with IE6, they need to invest, get the legacy software developers to provide support so they can use newer versions and get on with it already.

    • peter
      Permalink to comment#

      Well, if it’s too much to create a cross browser, cross operating system -compatible website. Then maybe you should look for another job.
      Just my 2 cents…

    • Gavin
      Permalink to comment#

      That works for the legacy developers too I assume?

    • peter
      Permalink to comment#

      I think degrade gracefully would suffice. You?
      But I think everyone should get a fully functional website…

  2. I think it’s easier to just add a class to input fields that need the styling.

    In my opinion that’s easier then adding a .js file to support some older browsers and even block out a few of them.

    Nevertheless, I dropped IE6 support. Just like Google did. Unless a clients wants me to. That means price * 2 = IE6 price.

    • Rick, typing the class name over
      and over
      and over
      and over
      and over again is easier?

      Nonetheless, you are cruel to html markup.

    • Well, my bad. :p

    • @Peter Yee how many form inputs do most websites have? At least in my experience not very many. Anyways I would most likely just explicitly list what input types I want to style in my css.

  3. Gotta love this! But I am still angry we can’t style much on input[type=file]. Have to hack it with jQuery uniform.

    p/s: just realise your “submit comment” button missing out cursor:pointer.

  4. Hey Chris!
    Like Peter Yee pointed out, your ‘Submit Comment’ button is missing the cursor:pointer; declaration.

    And another thing, you have a typing error. It kinda looks like this: :not()

    You forgot to include the closing parenthesis of the :not() selector when you closed .

    I’d be glad if you’d fix it. Just wanted to point out so that people don’t get confused reading that… =)

    • Not understanding… this is how it’s written in the article:

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

      That looks right to me? It’s early though, feel free to bonk me on the head if it’s still messed up and I’ll fix it.

    • peter
      Permalink to comment#

      @chris: in the text right above that piece of code

      and put some cursor:pointer on that button please ;-)

    • He won’t put cursor:pointer; on the button because he doesn’t use cursor:pointer; on the buttons in his website ^_^

    • And no, the ‘View Results’ “button” in the Poll is not a button, is an ‘a href’ :p

  5. Tanzania
    Permalink to comment#

    Chris, clear and accessible like usually, thank you! To Aaron Stone: I`m already confused))) I`ll use these recommendations in my work. And from blogger to bloggers: may be this link Greatiful can help my numerous colleges – bloggers to earn through blogging) Its easy to registrate, confirm your RSS channel, then sometimes enter and take your money. Thanks again, good luck!

  6. Nice Tutorial ! However, I don’t think using the :not() selector is a good option. It works in your example, but what about checkbox, radio button, calendar, range, etc… ? In the end, you’d end up with just as many selectors in your :not() rule.

    • You are right about that, if you end up :not()’ing just as much stuff as you would include, that’s even more confusing and verbose.

      Another consideration is the browsers that acknowledge the type, but don’t do anything with it. Say like the range type and Firefox 4. You might actually want to apply the texty styling to that because in that browser, it will literally just be a text input, but in Chrome 10 which does support the range input the -webkit-appearance of the range input will take over and override your texty styling anyway.

      Texty
      ——
      Text
      Email
      Url
      Tel
      Search
      Number
      Password
        Texty as fallback…
      Range
      Color
      Date
      Datetime
      Datetime-local
      Week
      Month
      Time

      Non Texty
      ————–
      Submit / Button
      Radio
      Checkbox
      File

      So still a bit ahead in the number of texty inputs vrs. not.

    • Jack Nycz
      Permalink to comment#

      I was literally writing this before I scrolled down and saw it! But then you wrote it and now my bit on seperating texty and non texty elements is obsolete…

    • John Pisello
      Permalink to comment#

      You’ve missed Textarea (texty, obviously) and Select (not sure how to classify this one…).

    • textareas are textareas and selects are selects, so they aren’t subject to accidental mis-stylings like inputs are.

  7. Permalink to comment#

    It is great ! I have tried with the css properties. Nice Input effect, but it is not working in ie7, 8
    Any hacks for the ie browser ?
    -vara

  8. Very nice, sir. I will use this often.

  9. Dan Carper
    Permalink to comment#

    Nice to know something like this is out there thanks for sharing.

    If the fields are next to each other you could also just use a wrapper div and style from there. Still not the best solution ever, but… better.

  10. Permalink to comment#

    I agree with the backwards approach my only concern is that the load time increases drastically on sub ie9 pages when using a large amount of js. I’ve had times when the load time has increased threefold on ie simply by adding this script… That is surely as bad as simply ignoring ie entirely?

  11. …or simply not use IE9.js at all.

    Users will still be able to use the form, which is the important thing, regardless of the design.

    Yes, yes, yes, IE users will miss on the enhanced experience, but, so what, as I said, using the form is the end goal. It’s not IE users’ or your/our fault they miss on enhanced experiences, you who’s fault is it ;)

    This is graceful degradation in its simplest and most effective form for incapable browsers.

    • Jack Nycz
      Permalink to comment#

      Yes, yes, yes, IE users will miss on the enhanced experience, but, so what, as I said, using the form is the end goal. It’s not IE users’ or your/our fault they miss on enhanced experiences, you who’s fault is it ;)

      What? Way too many commas dude – that’s a confusing statement right there.

    • lol, not too many amigo, that’s proper grammar ;)

      I do have a typo though. I meant to say: “…you know who’s fault is it ;)”

    • Jack Nycz
      Permalink to comment#

      Oh no I was not trying to be a grammar Nazi! I was just saying it was a bit, well, comma-y!

  12. onioneye
    Permalink to comment#

    As soon as you blogged this, I used it :D

    BTW, how about using selectivizr.js for the css 3 selectors in IE? Just a thought.

  13. Why use JavaScript for formatting? Just setup a style for all browsers then use progressive enhancement to style the form for browsers that understand the :not selector? Sure it might add more to your style sheet, but then again so are the vendor properties you’re using.

    • I think this is my most preferred way. Provide an acceptable user experience across the board and then, only for those that have the browser ability, enable an enhanced experience.

    • Jack Nycz
      Permalink to comment#

      I disagree wholeheartedly. I always use the best available technologies and then ‘fix it’ for – well let’s be honest then I fix it for IE. Most of the CSS3 stuff degrades nicely (e.g. just not having a shadow will not affect user experience at all) and really if you’re using ie6 with js turned off then you cannot be used to a full and healthy browser experience to begin with.

      I’m not going to put drum brakes on my car just because they’re available to everybody – I’m going to put on the good ones and give the drum-brakes as an option.

    • I manually Progressive Enhance everything I can in my projects.

      Graceful Degradation happens automatically.

  14. I thoroughly enjoyed how this was written – more posts need to be written like this on the interwebs; makes things so much more interesting!

  15. I love how your posts are structured so that I feel progressively smarter — until the bottom when you lay the smack down on my old ways.

  16. I wasn’t previously capable of creating an input box and styling it (never looked into it though).

    Thanks for the help with that!

    Very great and useful tip Chris!

  17. Paul Sprangers
    Permalink to comment#

    The final paragraph is epic! Great article! I need to look into that fallback.

  18. Yeah Me
    Permalink to comment#

    Some one is a Dragon Ball Z fan! ;-P

  19. Thanks for this!! Every time I get here, I get to learn something new!! And even more from the comments!!
    CSS performing logical things makes me happy!

    Thanks to all of the commenters !! The comments are really great!

  20. Ant
    Permalink to comment#

    I hate that creators of HTML made same tag (input) for all different controls — text, select and buttons. It cause problems when styling for older browsers (have to use style=”inp_text” or javascript to fix it).

  21. Dave Allen
    Permalink to comment#

    I like people telling me about typos. Sure you do too. Burdon should be burden. ;)

    PS. Having a bet with myself that the new screencast will be jQuery related. Go on, give us a hint!

  22. Permalink to comment#

    That’s great! Thank you so much for providing this article! This will probably be very useful for WordPress, etc. Thanks!!!

  23. Permalink to comment#

    Was looking for this.. Thanks Chris.

  24. This is the first i’ve heard of the :not selector sooo awesome! I can remember trying to style some buttons on a moodle install and started off my adding a class to each button… bad idea. Finally figured out how to style all the buttons at once using the type, in some situations its a must.

  25. Permalink to comment#

    Wow, it’s awesome!

    Thank you for this, but the thing wanna know is -” will this work for all the browsers? I am focusing on IE specially…”

  26. Brilliant, Nice one, we think we should implement it in the free theme

  27. The exact problem I was having, and the exact solution to that problem. Thank you.

  28. Terrymol
    Permalink to comment#

    it works great

  29. fjpoblam

    Great fun. Another oddity (challenge for me) in texty input is the rendering of type=search, at least insofar as iOS Safari is concerned. I get ball-like sides like the default submit button. Which is to say, border-radius 2em on a 1em-high field, or something like that. (Attractive to some, I suppose…)

    • fjpoblam

      (…later that very same afternoon) And the surprise answer is, the kludge “-webkit-appearance:none”. Thank you, Apple.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".