Last Updated: July 11, 2019
· jesseatomic

How to force a button to activate a file uplaod.

I recently worked on a project that required me to hide the file upload field and replace it with a button that would trigger the file upload.

I know this is a simple thing to do, but sometimes finding a simple method online is a pain. So hide those unnecessary fields and replace them with sweet CSS buttons!


<div class="container">
    <a class="blaster button">Choose File</a>
    <input type="file" name="somename" class="lightsaber">

The jQuery

<script src=""type="text/javascript"></script>

The CSS (For Flavor!)

         input { display: block; visibility: hidden; width: 0; height: 0;}
.button {
    padding: 5px 10px;
    display: inline;
    background: #4888EF;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #13648D;
    -webkit-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    transition:all .2s ease-in-out; 
    border:1px solid #2F5BB7;
.button:hover {
    background-position: 0 -48px;
    border:1px solid #2F5BB7;
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    width:120px; height:100px; margin:0 auto;

3 Responses
Add your response

That's cool. Used the exact same trick last week with drag & drop.
Cheers for sharing!

over 1 year ago ·

Nice tip, thanks!

over 1 year ago ·

good tip.
( typo in your title though: "uplaod" )

over 1 year ago ·