Plastic Feel

HTML & CSS credit card form for an in-house project I'm close to completing.

I designed this entirely in the browser with the following:
- Louis Harboe's Credit Card Icon Pack (http://dribbble.com/shots/66316-Credit-Card-Icon-pack)
- Subtle Pattern's Wave Cut (http://subtlepatterns.com/?p=387)
- a check mark icon designed by Adam Blair, my designer on this project

More importantly I wrote some CoffeeScript to automatically detect and highlight the relevant card type (see the opacity on the Visa logo in this shot), and run a Luhn algorithm check to validate the credit card number (hence the checkmark).

I could have styled the expiration date but apart from relatively invasive JavaScript techniques I don't know of a reliable way to do so with CSS. Even if there was and I wasn't a bit lazy, I tend to refrain from trying to change crucial browser-specific interface elements like selects. I'm weary of breaking familiarity, especially on such an important form for the app.

I'd like to know what you guys think of using dropdowns for expiration month and years. It seems much more error-proof than what I commonly see: two input fields with a two-character limit.

I'm planning on open-sourcing the HTML and CoffeeScript code later in the week since it was a bit tricky to find something similar when I looked around before building this.

PS: first shot ever, hi everybody.