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!
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![MooTools Accordion: Mouseover Style]()
Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...
![Duplicate DeSandro’s CSS Effect]()
I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page.
