Still learning HTML 5 cover image

Still learning HTML 5

Andrew Alba • March 30, 2013

html

So as I continue to work on learning more about HTML5 and CSS3, I have come across a few new items.

It seems that there have been some new input values added to the type attribute. I did some digging to try to find a comprehensive list of them and so far I have come up to the following:

input[type=checkbox]
input[type=color]
input[type=date]
input[type=datetime]
input[type=datetime-local]
input[type=email]
input[type=file]
input[type=month]
input[type=number]
input[type=password]
input[type=radio]
input[type=range]
input[type=search]
input[type=submit]
input[type=tel]
input[type=text]
input[type=time]
input[type=url]
input[type=week]

Wow! How I really like all of the new options. Except now I have a run into a problem. I am using several different input types for a project (“checkbox”,”color”,”date”,”datetime”,”email”,”number”,”password”,”radio”,etc), but I don’t want my password and file input types styled like the rest. I could just list all of the element in my stylesheet that I want to style accordingly or I could use another method to style all of the inputs EXCEPT the password and file inputs

input:not([type=password]):not([type=file]) {
    /* now I can style just what I want */
}

Front end work just got a bit more fun today!

UPDATE:

Just after posting this, I realized that something was wrong in IE8. After some digging I found out that IE does not support [highlightcode]:not[/highlightcode] selector until version 9 (of course it doesn’t right?). Ah, but some smart people out there have already taken care of this for us. You can add the following snippet in the head of your document to resolve this issue.

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