Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

Discussion

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