Style input type file

Question

Is it possible to style a input element of type file without worrying about browser compatibility  In my case I need to implement a background image and round border 1px   the button should also be customised if possible

User · Answer

Here s a simple css only solution  that creates a consistent target area  and lets you style your faux elements however you like    The basic idea is this    Have two  fake  elements  a text input link  as siblings to your real file input  Absolutely position them so they re exactly on top of your target area  Wrap your file input with a div  Set overflow to hidden  so the file input doesn t spill out   and make it exactly the size that you want your target area to be  Set opacity to 0 on the file input so it s hidden but still clickable  Give it a large font size so the you can click on all portions of the target area    Here s the jsfiddle  http   jsfiddle net gwwar nFLKU    lt form gt       lt input id  faux  type  text  placeholder  Upload a file from your computer    gt       lt a href     id  browse  gt Browse  lt  a gt       lt div id  wrapper  gt           lt input id  input  size  100  type  file    gt       lt  div gt   lt  form gt

User · Answer

After looking around on Google for a long time  trying out several solutions  both CSS  JavaScript and JQuery  i found that most of them were using an Image as the button  Some of them were hard to use  but i did manage to piece together something that ended out working out for me   The important parts for me was    The Browse button had to be a Button  not an image   The button had to have a hover effect  to make it look nice   The Width of both the Text and the button had to be easy to adjust  The solution had to work in IE8  FF  Chrome and Safari    This is the solution i came up with  And hope it can be of use to others as well   Change the width of  file input textbox to change the width of the textbox   Change the width of both  file input div   file input button and  file input button hover to change the width of the button  You might need to tweak a bit on the positions also  I never figured out why     To test this solution  make a new html file and paste the content into it    lt html gt   lt head gt    lt style type  text css  gt    file input textbox  height 25px width 200px float left     file input div      position  relative width 80px height 26px overflow  hidden     file input button   width  80px position absolute top 0px                       border 1px solid  F0F0EE padding 2px 8px 2px 8px  font-weight bold  height 25px  margin 0px  margin-right 5px     file input button hover width 80px position absolute top 0px                       border 1px solid  0A246A  background-color  B2BBD0 padding 2px 8px 2px 8px  height 25px  margin 0px  font-weight bold  margin-right 5px     file input hidden   font-size 45px position absolute right 0px top 0px cursor pointer                       opacity 0 filter alpha opacity 0  -ms-filter  alpha opacity 0   -khtml-opacity 0 -moz-opacity 0     lt  style gt   lt  head gt   lt body gt       lt input type  text  id  fileName  class  file input textbox  readonly  readonly  gt    lt div class  file input div  gt     lt input id  fileInputButton  type  button  value  Browse  class  file input button    gt     lt input type  file  class  file input hidden         onchange  javascript  document getElementById  fileName   value   this value         onmouseover  document getElementById  fileInputButton   className  file input button hover          onmouseout  document getElementById  fileInputButton   className  file input button      gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

Use the clip property along with opacity  z-index  absolute positioning  and some browser filters to place the file input over the desired button   http   en wikibooks org wiki Cascading Style Sheets Clipping

User · Answer

Same solution via Jquery  Works if you have more than one file input in the page    j   filebutton   click function         var input    j this  next   find  input        input click          j   fileinput   change function         var file    j this  val        var fileName   file split            var pai   j this  parent   parent   prev        pai html fileName fileName length-1        event preventDefault

User · Answer

Follow these steps then you can create custom styles for your file upload form   1   This is the simple HTML form please read the HTML comments I have written here bellow        lt form action   type your action here  method  POST  enctype  multipart form-data  gt       lt div id  yourBtn  style  height  50px  width  100px border  1px dashed  BBB  cursor pointer   onclick  getFile    gt Click to upload  lt  div gt       lt  -- this is your file input tag  so i hide it -- gt       lt div style  height  0px width  0px  overflow hidden   gt  lt input id  upfile  type  file  value  upload   gt  lt  div gt       lt  -- here you can have file submit button or you can write a simple script to upload the file automatically-- gt       lt input type  submit  value  submit   gt       lt  form gt    2   Then use this simple script to pass the click event to file input tag       function getFile            document getElementById  upfile   click            Now you can use any type of a styling without worrying how to change default styles  I know this very well  because I have been trying to change the default styles for month and a half  believe me it s very hard because different browsers have different upload input tag  So use this one to build your custom file upload forms Here is the full AUTOMATED UPLOAD code    lt html gt   lt style gt   yourBtn     position  relative     top  150px     font-family  calibri     width  150px     padding  10px     -webkit-border-radius  5px     -moz-border-radius  5px     border  1px dashed  BBB      text-align  center     background-color   DDD     cursor pointer       lt  style gt   lt script type  text javascript  gt   function getFile       document getElementById  upfile   click        function sub obj       var file   obj value      var fileName   file split            document getElementById  yourBtn   innerHTML   fileName fileName length-1       document myForm submit        event preventDefault         lt  script gt   lt body gt   lt center gt   lt form action   type your action here  method  POST  enctype  multipart form-data  name  myForm  gt   lt div id  yourBtn  onclick  getFile    gt click to upload a file lt  div gt   lt  -- this is your file input tag  so i hide it -- gt   lt  -- i used the onchange event to fire the form submission-- gt   lt div style  height  0px  width  0px overflow hidden   gt  lt input id  upfile  type  file  value  upload  onchange  sub this    gt  lt  div gt   lt  -- here you can have file submit button or you can write a simple script to upload the file automatically-- gt   lt  --  lt input type  submit  value  submit   gt  -- gt   lt  form gt   lt  center gt   lt  body gt   lt  html gt

User · Answer

use uniform js plugin to style input of any type  select  textarea   The URL is  http   uniformjs com

[html] Style input type file?

Examples related to html

Examples related to css

Examples related to file

Examples related to input

Examples related to cross-browser