Styling a file-upload button

Question

I am creating a simple file-upload web. This is the code that i have:

    <form  action="" method="post" enctype="multipart/form-data">
    <input type="file"  id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
<button type="submit" value="Upload!">Upload</button>
</form>

I've seen a lot questions pretty much like mine but I couldn't find a solution. Maybe I can't apply them to my code. Not sure how to use labels cause after I create one it appears as text and I am not able to style it like a button. Also a piece of space stays blank, after i change the opacity of the <input type="file" id="upload-photo" name="files[]" to 0.Any advice would be helpful. Thanks in advance.

Hitesh Misro · Accepted Answer · 2016-09-07 08:39:27Z

3

Check this snippet

What you need to do is to provide a label for the input field and style as it would be a button

#upload-photo {
    height: 0;
    width: 0;
}

#upload-photo-label {
    border: 1px solid #cccccc;
    padding: 5px 30px;
    font-family:arial;
    font-size: 13px;
}
#upload-photo-label:active{
    background:#ccc;
}

<form action="" method="post" enctype="multipart/form-data">
  <input type="file"  id="upload-photo" name="files[]" multiple="multiple" accept="image/*"/>
  <label id="upload-photo-label" for="upload-photo">Browse</label>
  <button type="submit" value="Upload!">Upload</button>
</form>

answered Sep 7, 2016 at 8:39

Hitesh Misro

3,4511 gold badge25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Niki Karaolis Over a year ago

I am styling it as my other buttons, that work properly, but the label keeps on appearing as text. @Hitesh Misro

Hitesh Misro Over a year ago

@NikiKaraolis can you post a fiddle with your problem?

Niki Karaolis Over a year ago

Here it is, even though php is not working in fiddle. jsfiddle.net/dredby5u/1/#&togetherjs=nao7twFLtT , but strange is that browse is acting like a button in fiddle. What does that mean , I have a problem with my server , or? @Hitesh Misro

Hitesh Misro Over a year ago

Thats how it was styled and i didn't get any problem in your fiddle related to file browse.

Niki Karaolis Over a year ago

Somehow, fixed. Today just turned my computer on , loaded the web and everything was fine. Appreciate your help @Hitesh Misro

|

user2164884 · Accepted Answer · 2016-09-07 08:00:20Z

2

you can do it like this

Html

<div class="box">
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple style="display: none;" />
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choose a file&hellip;</span></label>
</div>

Css

.box {
    background-color: #dfc8ca;
    padding: 6.25rem 1.25rem;
}

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}
.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

svg:not(:root) {
    overflow: hidden;
}

.inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}
.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

here demo link https://jsfiddle.net/7we705q1/5/

answered Sep 7, 2016 at 8:00

user2164884

2 Comments

Niki Karaolis Over a year ago

Might work but not sure how to connect it to my php code.@Fahran Dharsi

user2164884 Over a year ago

it is so simple you can use html format in php code

Collectives™ on Stack Overflow

Styling a file-upload button

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related