HTML5, CSS3 & JS Experiments

<div>Click <div class="css3-inline-file-input">
<form name="form-01" method="post" action="./" enctype="multipart/form-data">
    <input type="file" name="form-01-file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" /><span>here</span>
</form></div> to select file. You can use this cool trick to create inline <div class="css3-inline-file-input">
<form name="form-01" method="post" action="./" enctype="multipart/form-data">
    <input type="file" name="form-01-file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" /><span>file upload</span>
</form>
</div> forms. If you are interested in <a href="html5-web-components.html" target="_blank">HTML5 
    Web Components</a>, check <a href="x-upload-html5-web-component.html" target="_blank">this solution</a> 
    for modern file upload inputs. For complete form styling solution, you could give a try 
    to <a href="http://wemakesites.net/?pageid=details&component=forms-js" target="_blank">AcidJs.Forms</a>.</div>
<p> </p>
            

/*
 * @CSS3 How to Create an Inline Masked File Upload Form with CSS3/HTML5
 * @author Martin Ivanov
 * @website http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 **/

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;
    
    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}