Cross-browser custom styling for file upload button

Question

I m trying to style a file upload button to my personal preferences  but I couldn t find any really solid ways to do this without JS  I did find two other questions about this subject  but the answers there either involved JavaScript  or suggested Quirksmode s approach   My major issue with this Quirksmode s approach is that the file button will still have the browser-defined dimensions  so it won t automatically adjust to whatever s used as button that s placed below it  I ve made some code  based on it  but it will just take up the space the file button would normally take up  so it won t at all fill the parent div like I want it to   HTML    lt div class  myLabel  gt       lt input type  file   gt       lt span gt My Label lt  span gt   lt  div gt    CSS    myLabel       position  relative     myLabel input       position  absolute      z-index  2      opacity  0      width  100       height  100       This fiddle demonstrates how this approach is quite flawed  In Chrome  clicking the    below the second demo button will open the file dialog anyway  but also in all other browsers  the file button doesn t take up the correct areas of the button   Is there any more solid way to style the file upload button  without any JavaScript  and preferably using as little  hacky  coding as possible  since hacking usually brings other problems along with it  such as the ones in the fiddle

User · Answer

I just came across this problem and have written a solution for those of you who are using Angular. You can write a custom directive composed of a container, a button, and an input element with type file. With CSS you then place the input over the custom button but with opacity 0. You set the containers height and width to exactly the offset width and height of the button and the input's height and width to 100% of the container.

the directive

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

a jade template if you are using jade

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")

the same template in html if you are using html

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

the css

.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

User · Answer

It s also easy to style the label if you are working with Bootstrap and LESS   label        btn         btn-primary          gt  input type  file             display  none

User · Answer

Any easy way to cover ALL file inputs is to just style your input type button  and drop this in globally to turn file inputs into buttons     document  ready function            input type file    each function              var thisInput      this           var newElement       lt input type  button  value  Choose File    gt             newElement click function                 thisInput  click                        thisInput  after newElement           thisInput  hide                  Here s some sample button CSS that I got from http   cssdeck com labs beautiful-flat-buttons   input type button      position  relative    vertical-align  top    width  100     height  60px    padding  0    font-size  22px    color white    text-align  center    text-shadow  0 1px 2px rgba 0  0  0  0 25     background   454545    border  0    border-bottom  2px solid  2f2e2e    cursor  pointer    -webkit-box-shadow  inset 0 -2px  2f2e2e    box-shadow  inset 0 -2px  2f2e2e    input type button  active     top  1px    outline  none    -webkit-box-shadow  none    box-shadow  none

User · Answer

This seems to take care of business pretty well  A fidde is here   HTML   lt label for  upload-file  gt A proper input label lt  label gt    lt div class  upload-button  gt        lt div class  upload-cover  gt           Upload text or whatevers      lt  div gt        lt  -- this is later in the source so it ll be  on top  -- gt       lt input name  upload-file  type  file    gt    lt  div gt   lt  --  upload-button -- gt    CSS     first things first - get your box-model straight        before    after       -moz-box-sizing  border-box      -webkit-box-sizing  border-box      box-sizing  border-box     label          just positioning        float  left       margin-bottom   5em      upload-button          key        position  relative      overflow  hidden          just positioning        float  left       clear  left      upload-cover           basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into        background-color  gray      text-align  center      padding   5em 1em      border-radius  2em      border  5px solid rgba 0 0 0  1        cursor  pointer      upload-button input type  file         display  block      position  absolute      top  0  left  0      margin-left  -75px     gets that button with no-pointer-cursor off to the left and out of the way        width  200      over compensates for the above - I would use calc or sass math if not here       height  100       opacity   2     left this here so you could see  Make it 0        cursor  pointer      border  1px solid red      upload-button hover  upload-cover       background-color   f06

User · Answer

I m posting this because  to my surprise  there was no other place I could find that recommended this   There s a really easy way to do this  without restricting you to browser-defined input dimensions  Just use the  lt label gt  tag around a hidden file upload button  This allows for even more freedom in styling than the styling allowed via webkit s built-in styling 1    The label tag was made for the exact purpose of directing any click events on it to the child inputs 2   so using that  you won t require any JavaScript to direct the click event to the input button for you anymore  You d to use something like the following    x000D   x000D  label myLabel input type  file     x000D      position absolute  x000D      top  -1000px  x000D    x000D   x000D         Example custom styling        x000D   myLabel   x000D      border  2px solid  AAA  x000D      border-radius  4px  x000D      padding  2px 5px  x000D      margin  2px  x000D      background   DDD  x000D      display  inline-block  x000D    x000D   myLabel hover   x000D      background   CCC  x000D    x000D   myLabel active   x000D      background   CCF  x000D    x000D   myLabel  invalid   span   x000D      color   A44  x000D    x000D   myLabel  valid   span   x000D      color   4A4  x000D    x000D   lt label class  myLabel  gt  x000D       lt input type  file  required  gt  x000D       lt span gt My Label lt  span gt  x000D   lt  label gt  x000D   x000D   x000D    I ve used a fixed position to hide the input  to make it work even in ancient versions of Internet Explorer  emulated IE8- refused to work on a visibility hidden or display none file-input   I ve tested in emulated IE7 and up  and it worked perfectly      You can t use  lt button gt s inside  lt label gt  tags unfortunately  so you ll have to define the styles for the buttons yourself  To me  this is the only downside to this approach  If the for attribute is defined  its value is used to trigger the input with the same id as the for attribute on the  lt label gt

User · Answer

The best example is this one  No hiding  No jQuery  It s completely pure CSS  http   css-tricks com snippets css custom-file-input-styling-webkitblink    x000D   x000D   custom-file-input  -webkit-file-upload-button   x000D      visibility  hidden  x000D    x000D   x000D   custom-file-input  before   x000D      content   Select some files   x000D      display  inline-block  x000D      background  -webkit-linear-gradient top   f9f9f9   e3e3e3   x000D      border  1px solid  999  x000D      border-radius  3px  x000D      padding  5px 8px  x000D      outline  none  x000D      white-space  nowrap  x000D      -webkit-user-select  none  x000D      cursor  pointer  x000D      text-shadow  1px 1px  fff  x000D      font-weight  700  x000D      font-size  10pt  x000D    x000D   x000D   custom-file-input hover  before   x000D      border-color  black  x000D    x000D   x000D   custom-file-input active  before   x000D      background  -webkit-linear-gradient top   e3e3e3   f9f9f9   x000D    x000D   lt input type  file  class  custom-file-input  gt  x000D   x000D   x000D

User · Answer

Please find below a way that works on all browsers  Basically I put the input on top the image  I make it huge using font-size so the user is always clicking the upload button      x000D   x000D   myFile   x000D    position  relative  x000D    overflow  hidden  x000D    float  left  x000D    clear  left  x000D    x000D   myFile input type  file     x000D    display  block  x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    opacity  0  x000D    font-size  100px  x000D    filter  alpha opacity 0   x000D    cursor  pointer  x000D    x000D   lt label class  myFile  gt  x000D     lt img src  http   wscont1 apps microsoft com winstore 1x c37a9d99-6698-4339-acf3-c01daa75fb65 Icon 13385 png  alt      gt  x000D     lt input type  file    gt  x000D   lt  label gt  x000D   x000D   x000D

[html] Cross-browser custom styling for file upload button

Examples related to html

Examples related to css

Examples related to cross-browser

Examples related to file-io