How to add stylish button to input type file and make it work??

HTML:

      <span class="file-wrapper">

      <input type='file' id='bgphotoimg' onclick="getImage()"/>

       <a class="col-sm-12 col-xs-12 btn btn-primary" style="margin-top: 15px;"> Upload Image</a>

       </span>

css:

.file-wrapper {

    cursor: pointer;

    display: inline-block;

    overflow: hidden;

    position: relative;

}

 input[type=file] {

    display: block;

}

.file-wrapper input {

    cursor: pointer;

    font-size: 100px;

    filter: alpha(opacity=1);

    -moz-opacity: 0.01;

    opacity: 0.00;

    position: absolute;

    top: 10%;

    z-index: 9;

}

#clock{

    background-image:url('');

    background-size:cover;

    background-position: center;

    height: 175px; 

     width: 100%;

    border: 1px solid #bbb;

}