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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

  • By
    QuickBoxes for Dojo

    Adding to my mental portfolio is important to me. First came MooTools, then jQuery, and now Dojo. I speak often with Peter Higgins of Dojo fame and decided it was time to step into his world. I chose a simple but useful plugin...

Discussion

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