CSS ::file-selector-button
We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we've created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc.
One control that has traditionally been tough to style is the input[type=file] element. Said input variation visually contains a button and text, all being clickable. Bit of a Frankenstein's monster if you ask me. Can we style the button part though? We can!
To style the button button portion of input[type=file], you can use ::file-selector-button:
input[type=file]::file-selector-button {
border: 1px solid green;
background: lightgreen;
}
Styling this input variant wasn't possible when it was first introduced. WebKit first started allowing styling complex form controls, and we can't thank them enough!
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![Create a Sprited Navigation Menu Using CSS and MooTools]()
CSS sprites are all the rage these days. And why shouldn't be? They're easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 - It's JavaScript Time.
![Facebook-Style Modal Box Using MooTools]()
In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect.
The Imagery
Facebook uses a funky sprite for their modal...
