type="file"
by AJIEKCEU
HTML
<input type="file" id="fileInput" size="35"
onchange="document.getElementById('fileInputText').value = this.value;" />
<div id="mask">
<input type="text" id="fileInputText" size='30'/>
</div>
CSS
#form
{
position:relative; /* позиционирование абсолютное элементов внутри формы */
padding:0;
margin:0;
}
#mask
{
width:314px; /* ширина рисунка */
height:30px;
padding: 2px 0 0 3px;
background: url(http://senseit.ru/i/file.png) no-repeat 0 0;
}
#fileInput
{
position:absolute;/* позиционируем настоящий <font id="tag"><input type="file"></font> */
cursor:pointer; /*изменим курсор для симпотичности*/
width:240px;
/* задаем нулевую видимость для разных браузеров*/
-ms-filter:"progid:DXImageTransFORM.Microsoft.Alpha(opacity=0)";
filter:progid:DXImageTransFORM.Microsoft.Alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
#fileInputText
{
background: none;
text-align: right;
border: none;
width: 172px;
height: 16px;
font-size: 11px;
color: #300;
}
JavaScript
http://senseit.ru/i/file.png