Styling all Text Elements with the CSS :not Filter

January 19, 2016 • from Maui, HI • 2 comments

On this page:

Here's a short post that's more of a CSS tip that I've found useful when styling an application. If you're working with CSS in an application that has more than a handful of forms you're likely dealing with a number of different input types. Plain text data, Dates, numbers, email addresses, ip addresses and who knows what else. HTML 5 now provides a boatload of different input types that all display in what essentially is a textbox, but provides special input handling. For example, on a mobile device if you use:

<input id="email" name="email " type="email"/>

you get special input characters on the keyboard: The @, – and . (or even a .com button) show up to make it easier to enter an email address. Likewise when you use a date input field you get a date picker.

For desktop browsers the behavior generally is not as pronounced, but you still want to use the newer input types to give mobile devices an easier data entry experience. The end result is as a developer, if you need to generically style textbox input you need to address all of the supported input types.

Input Type Proliferation

HTML5 has brought a whole big proliferation of input element types that are now available. All of the following are essentially represented by a textbox:

text
password
date
datetime-local
time
number
email
tel
search
url
ipaddress

And typically if you'll want all of these input types to be formatted consistently.

If you have a sizable application that uses a number of these input types, you've probably found yourself using input styling like the following in your CSS:

input[type=text], input[type=password], input[type=date], input[type=time], input[type=datetime-local],
input[type=email], input[type=number],input[type=range],
input[type=search], input[type=color], input[type=ipaddress], select, textarea {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    font-family: Trebuchet, 'Trebuchet MS', 'Lucidia Sans', Helvetica, Arial, Verdana, sans-serif;
}

While that's not too bad if you have one place where you need to style input elements, it gets ugly if you have sub-styling or a number of different media queries where you end up continuously adding this long list of input types.

You might be tempted to just assign all input elements to a style like this:

input,textarea {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    font-family: Trebuchet, 'Trebuchet MS', 'Lucidia Sans', Helvetica, Arial, Verdana, sans-serif;
}

But that doesn't really work because it also includes submit, button and file stylings. Thus are the inefficiencies of HTML5 semantic tags that lump these disparate elements into one input tag which is one thing that would be nice to get addressed in HTML (I guess you can use <button> submit buttons, but that still leaves the file upload button which is a pain anyway).

Using the :not Selector for a CSS Blacklist

One solution that I find more user friendly given the proliferation of input types, is to use the CSS :not selector to exclude just the few types that shouldn't be styled as an input box. :not is a CSS filter which effectively lets you exclude a selection of elements.

So, I like to use the following CSS:

input:not([type=submit]):not([type=button]):not(type=checkbox):not(type=radio):not([type=file]), select, textarea {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    font-family: Trebuchet, 'Trebuchet MS', 'Lucidia Sans', Helvetica, Arial, Verdana, sans-serif;
}

To me it's easier to remember what I don't want to styled as an input box, than trying to remember the full list of input types and their inconsistent names in a long list.

FWIW, the :not() selector comes in handy for many things whenever you're dealing with a group of elements and you need to build some sort of exception list. It's a handy selector to filter element lists down.

CSS Filter Selector Support

The one caveat with this functionality is that it requires support for CSS3 filter selectors and the :not() selector in particular. It's supported in all CSS3 compatible browsers so support is nearly universal – the big exception is IE 8 and down and I can live with that. With the recent discontinuation of support for all IE versions except for IE 11, I think we're finally on the last leg of even having to think about supporting these ancient, non-standard browsers.

Summary

This is not a great relevation of course, but I constantly see these long input style lists in CSS, and using :not() is an alternative to tame this list down a bit. Maybe some of you find this useful and find new uses for the :not() selector.