Style file input

Question

I want to update this file input to look like the image I've attached.

Currently I have this view:

http://davis-design.de/marktadresse/mein-profil.html

But I would like it to look like the following:

enter image description here

My current attempt:

 <span class="btn">
     <span class="fileupload-new">Bild auswählen</span>
     <span class="fileupload-exists">Ändern</span>
     <input type="file" name="bild" id="bild">
 </span>

How would I go about styling the default file input element?

http://stackoverflow.com/questions/4909228/style-input-type-file — Rohan Büchner, Mar 04 '14 at 13:53

score 0 · Answer 1 · answered Mar 04 '14 at 13:53

0

You can use jqtransform here to customize your input type here

answered Mar 04 '14 at 13:53

jerin

326
1
3
11

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Just as a word of warning from past experience, certain methods of styling a file upload doesn't always work cross browser, and has given me some gray hair. But I believe the below solution should work for most cases

Based on the answer from @BjarkeCK

https://stackoverflow.com/a/9182787/1105314

Fiddle

http://jsfiddle.net/D9T4p/1/

Markup

<div style="padding:100px;">
    <div class="uploadButton">
        BILD AUSWÄHLEN
        <input type="file" />
    </div>
</div>

Javascript

$(function() {
    $(".uploadButton").mousemove(function(e) {
        var offL, offR, inpStart
        offL = $(this).offset().left;
        offT = $(this).offset().top;
        aaa= $(this).find("input").width();
        $(this).find("input").css({
            left:e.pageX-aaa-30,
            top:e.pageY-offT-10
        })
    }); 
});

CSS

.uploadButton input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:0;
}

.uploadButton {    

   position:relative;
   overflow:hidden;
   cursor:pointer;

/*** (Copied from the link you supplied) ***/
   text-transform: uppercase;
   font-size: 13px;
   font-family: 'Roboto',Arial,sans-serif;
   padding: 8px 22px;
   display: inline-block;
   -moz-border-radius: 2px;
   border-radius: 2px;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.1) inset;
   color: #FFF;
   background-color: #2561BA;
}

Update CSS only solution:

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

score 0 · Answer 3 · answered Feb 22 '16 at 15:27

There is a easy css-only solution. you don't need any javascript for it. so - just dont.

The keyword of the solution is: <label>.

Label? - Yes a label! The simple HTML Element. You can easily style an <label> element.

Here is a sample:

HTML

<label for"foo"></label>
<input type="file" id="foo"/>

CSS

label {
    cursor: pointer;
}

#foo {
    height: 0.1px;
    width: 0.1px;
    z-index: -1;
}

You dont use the input element itself. You'll use the label instead. If you click on the label, you'll get referenced to the 'real' input element and its functionality.

Style file input

3 Answers3

HTML

CSS