Custom File Upload Styles

Changing the style of input type=file

HTML

<h2>Custom File Uploader</h2>
<!--Changing [Input Type=file] Styling -->
<div class='styled-file-area'>
    <input type='text'id='selectedFile' readonly/>
    <input type='button' class='morphed-area' value='Browse'>
    <input type='file' class='morphed-area' id='myFile'>
</div>
<div id='sel'></div>

CSS

.styled-file-area{
    width:50%;
    position:relative;
}
.morphed-area{
    position:absolute;
    right:0%;
    height:30px;
    width:20%;
    min-width:70px;
}
.styled-file-area input[type='button']{
    border:0px;
    border-radius:5px;
    background:orange;
}
.styled-file-area input[type='file']{
    opacity:0;
}
input[type='text']{
    width:80%;
    height:24px;
}

/*Other Styles*/
h2{
    font-family:'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
}