The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, which I wanted to share with you.
The Markup:
[source language=”html”]
<div class="css3-inline-file-input">
<form action="./" enctype="multipart/form-data" method="post" name="form-01">
<input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
</form>
</div>
[/source]
The CSS:
[source language=”css”].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;
}[/source]
Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.
You can check and download the demo on this page.
Enjoy the rest of the day!
Related Posts
© 2006 - 2023 Martin Ivanov