Adding style to file upload button in css

Question

I have a text field and button with following css:

JS fiddle link : http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      box-shadow:inset 0px 1px 0px 0px #cae3fc;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
      background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
      background-color:#79bbff;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #469df5;
     display:inline-block;
     color:#ffffff;
     font-family:arial;
     font-size:14px;
     font-weight:bold;
     padding:5px 14px;
     text-decoration:none;
     text-shadow:1px 1px 0px #287ace;
    cursor:pointer;
}
.submit:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
     background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
     background-color:#4197ee;
}
 .submit:active {
   position:relative;
   top:1px;
}

 .text-input {
    padding: 6px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
 }

<form>
    <input type="text" class="text-input" size="40"/>
    <input type="button" value="Upload" id="upload" class="submit"/>
</form>

I want to add the same style to the file upload input type. I am a css beginner. How can i use this style to file upload button?

file inputs are very hard to style. most people work around by making the file input invisible and building something else on top of it that LOOKS like what they want, but passes clicks and whatnot on through to the actual input. — Marc B, Jan 18 '13 at 14:59
possible duplicate of [Style input type file?](http://stackoverflow.com/questions/4909228/style-input-type-file) — Diodeus - James MacFarlane, Jan 18 '13 at 15:03
thanks for ur help, but i do php programming and not much experience with css. so its hard for me. any tutorial link? — sonam, Jan 18 '13 at 15:04
check this out http://stackoverflow.com/questions/4909228/style-input-type-file — arpad, Jan 18 '13 at 15:05
thanks for your suggestion but the demo I found at http://htmlcampus.com/demo/style-a-file-browse-button-with-css/ is more suitable to my case — sonam, Jan 18 '13 at 15:15
Possible duplicate of [How to style "input file" with CSS3 / Javascript?](http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript) — Chris Moschini, Nov 14 '15 at 05:38

Seven · Answer 1 · 2013-01-18T15:41:53.530

Try this solution: http://jsfiddle.net/JJRrc/1/

Html

<p class="form">
  <input type="text" id="path" />
  <label class="add-photo-btn">upload
    <span>
       <input type="file" id="myfile" name="myfile" />
    </span>
  </label>
</p>

CSS

.form input[type="file"]{
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding:0;
  left:0;
  }
 .add-photo-btn{
   position:relative;
   overflow:hidden;
   cursor:pointer;
   text-align:center;
   background-color:#83b81a;
   color:#fff;
   display:block;
   width:197px;
   height:31px;
   font-size:18px;
   line-height:30px;
   float:left;
 }
 input[type="text"]{
   float:left;
 }

JQuery

$('#myfile').change(function(){
  $('#path').val($(this).val());
});

It should be noted that this implementation preserves the original input file element's click events, which is essential if you plan on supporting file uploads in IE. More info here: http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8/4335390#4335390 — Adam Ritenauer, Jul 30 '13 at 22:00

sonam · Accepted Answer · 2013-01-18T16:35:38.797

I tried this it looks pretty good to me. Are there any flaws with this? Here is the jsfiddle link http://jsfiddle.net/Tdkre/1/

#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(upload.png) 100% 1px no-repeat;
    width:345px;
    height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
    padding: 6px;
    font-size: 13px;
    background: #fff url('bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
    border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
    height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2; 
}

<div id="FileUpload">
<input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
<div id="BrowserVisible"><input type="text" id="FileField" /></div>

Here are the images enter image description here

Does this work in IE8? Looks like it does not render properly in that version of Internet Explorer — user327999, Oct 10 '13 at 15:36
I wish I could vote this down more because I wasted a lot of time trying to implement this and get it working in IE to find it is practically impossible. When you click the textbox in IE's file upload control, the cursor actually focuses for typing instead of opening the file upload dialogue...aaand you can't programatically open it with js `.click()` either. See this answer: http://stackoverflow.com/a/1829817/550309 — Nick Rolando, Jan 15 '14 at 23:49

score 8 · Answer 3 · answered Jun 14 '13 at 15:09

8

You could also use jQuery, like this:

<img id="image" style="cursor:pointer;" src="img.jpg" />
<input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>

And this jquery code

$("#image").click(function(){
 $("#photosubmit").click();
});

Hopes this helps someone too!

answered Jun 14 '13 at 15:09

Ivotje50

479
6
13

I thought it is impossible to dispatch click events on file input elements... How does jQuery do that? – Tomáš Zato - Reinstate Monica Feb 09 '14 at 22:04
3

Your username is amazingly similar to mine... And I've had this username for about 7 years now. Cool. – Joeytje50 May 07 '14 at 16:17

score 3 · Answer 4 · edited May 25 '14 at 07:09

3

try this:

In your css file put this on the end of file or somewhere else: input[type="file"]::-webkit-file-upload-button. This syntax is only for button style.

If you put there only: input[type="file"] you can style the array where you have filename.

edited May 25 '14 at 07:09

griffon vulture

5,548
5
34
56

answered May 25 '14 at 06:41

dinker127

31
1

score 1 · Answer 5 · answered Jan 18 '13 at 15:46

It is notoriously hard to style file upload buttons, but if you are willing to use jQuery and a plugin I've found this one to be very useful.

It gives you the posibility to "fake" file upload button functionality on any DOM element, so you can style it any way you want. Works well in all major browsers including old IE versions.

Octopus · Answer 6 · 2014-01-23T17:49:24.387

I run this relatively short jQuery on my page that contains one or more unaltered html <input type="file"> elements.

The jQuery will hide the elements and insert new ones where appropriate that mimic the same behaviour.

This answer is similar to others on the page but has been tested in IE browsers as well as the ones whose developer's actually take the time to support carefully considered web standards.

$(document).ready(function(){

  // replace all file upload elements for styling purposes
  $('input[type="file"]').each(function(){
    var btn = $('<button class="file">Browse...</button>');
    var txt = $('<span class="file"></span>');
    $(this).after(txt).after(btn);
    $(this).css({display:'none'});
    var target = this;
    $(btn).click(function(ev){ 
      ev.preventDefault(); 
      $(target).click(); 
    })
    $(target).change(function(){
      // IE uses a stupid renaming scheme that includes "fake-path"
      var fname = $(target).val()
      $(txt).html(fname.substr(fname.lastIndexOf('\\')+1));
    });
  });
});

Now you just need to style button.file and span.file as you like and you are good to go.

score 1 · Answer 7 · edited Dec 27 '14 at 11:27

1

Here is a link. You can change style of button.

HTML

<button>upload</button>
<input type="text" id="f" disabled="disabled" />
<input id="html_btn" type='file' " /><br>

CSS

button {
    border-radius:10px;
    padding:5px;
}
#html_btn {
    display:none;
}

Javascript

$('button').bind("click", function () {
    $('#html_btn').click();

});
$('#html_btn').change(function () {
    document.getElementById("f").value = $('#html_btn').val();
});

edited Dec 27 '14 at 11:27

sjaime

1,460
8
16

answered Dec 27 '14 at 10:31

milan kyada

608
5
15

Notice the fiddle provided doesn't work because it doesn't include jQuery, which you need to run this code. – sjaime Dec 27 '14 at 11:05

score 1 · Answer 8 · answered Jul 16 '19 at 07:16

Simple Solution: Custom file upload button with css only

.fileUpload input[type=file]{
                display:none;
            }
            .btn{
                background-color:#e3e3e3;
                color:#333;
                border:1px solid #e6e6e6;
                border-radius:3px;
                padding:6px 12px;
                font-size:16px;
            }

<label class="btn fileUpload btn-default">
       Browse <input type="file" hidden="">
</label>

Adding style to file upload button in css

8 Answers8

Linked

Related