CSS ::file-selector-button

By  on  

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!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!