HTML5, CSS3 & JS Experiments

By Martin Ivanov

Inline File Upload Input

Demo

Click
here
to select file. You can use this cool trick to create inline
file upload
forms. If you are interested in HTML5 Web Components, check this solution for modern file upload inputs. For complete form styling solution, you could give a try to AcidJs.Forms.

 

Usage and Code Insight

<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;
}