CSS design a input field type=file

Question

I have an input field:

<input type="file" name="fileToUpload" id="fileToUpload">

Now i want to design this field like this:

enter image description here

How can i do this?

This is CSS 101. Or, 2 mins. in Photoshop (if not even); *take your pick*. — Funk Forty Niner, Mar 20 '15 at 14:18
Please try to show some effort on your part to recreate this, otherwise you are simply asking other people to do your work for you. — Patrick, Mar 20 '15 at 14:20
Here you go [W3schools](http://www.w3schools.com/css/). Now go fly my young bird! Make daddy proud. — dowomenfart, Mar 20 '15 at 14:20
Please do not *ever* recommend W3Schools @dowomenfart as their information is typically not up to date and is not a reputable as other sources for learning web development. — Jay Blanchard, Mar 20 '15 at 14:49
So your telling me styling an input is out of date on w3schools? I'm to look on those sites and compare how to style an input... Let's see if they're different. @JayBlanchard — dowomenfart, Mar 20 '15 at 14:52
@JayBlanchard are you one of those people who listens to anything that they read on the internet? Because just did a comparison on CSStricks and HTMLrock and all style the input the same. — dowomenfart, Mar 20 '15 at 14:59
@dowomenfart please do not be insulting. If styling the inputs are all the same that means all is up to date and that is good. As is said on W3Fools, W3Schools is getting better at keeping up. You will find, not just from me, a disdain for W3Schools on SO. If you continue to reference them others will no doubt will offer the same sort of comment that I did. — Jay Blanchard, Mar 20 '15 at 15:49

score 3 · Accepted Answer · answered Mar 20 '15 at 14:35

3

Here's the html:

<span class="filewrap">
    Some funny german words I don't understand
    <input type="file"/>
</span>

and here's the CSS:

.filewrap{
    position:relative;
    background:#000;
    border:1px solid #cc0000;
    padding:15px 100px;
    color:#fff;
    font-family:sans-serif;
    font-size:12px;
}

input[type="file"]{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

See this demo fiddle

answered Mar 20 '15 at 14:35

Ted

14,757
2
41
58

Thanks for the answer! But i have a problem. If i make the windows smaller the span field will break up and go in the next row. Can i give the span maybe a width of 305px? I tried it with no result. – Skeptar Mar 20 '15 at 17:28
@Skeptar, make it a div and do that or [do this](http://jsfiddle.net/5dmfgzr2/3/) – Ted Mar 20 '15 at 17:45
Thanks! It works with the div. – Skeptar Mar 20 '15 at 18:09

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

The way to do this is to place an element on top of the input button and order them so that the upload input is underneath and therefore hidden.

Fiddle example

HTML

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

CSS

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

Some more useful links:

edited May 23 '17 at 10:29

Community

1
1

answered Mar 20 '15 at 14:20

winseybash

704
2
12
27

Just posting an answer with links isn't much of an answer. Try to provide these links in the comments of the OP. – Rimble Mar 20 '15 at 14:51
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Linda Lawton - DaImTo Mar 20 '15 at 14:53
1

Taken on board, I've now added some code and a JSFiddle. Thanks for the feedback. @DaImTo – winseybash Mar 20 '15 at 15:11

CSS design a input field type=file

2 Answers2