|
Сообщение от autosoft
|
|
По-сути этот div - стилизованная кнопка для загрузки файлов.
|
Ты про это имел ввиду чтоль? Дык тут и скрипт не нужен:
<!DOCTYPE html>
<html>
<head>
<style>
.file_field {
position: relative;
border: 1px solid #000;
width: 200px;
height: 20px;
font-weight: bold;
background: -webkit-linear-gradient(top, #abd8f0, #446f86);
background: -moz-linear-gradient(top, #abd8f0, #446f86);
background: -o-linear-gradient(top, #abd8f0, #446f86);
background: -ms-linear-gradient(top, #abd8f0, #446f86);
background: linear-gradient(top, #abd8f0, #446f86);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#abd8f0, endColorstr=#446f86);
color: #ffc97d;
}
.file_field div {
float: right;
font-size: 15px;
text-align: center;
width: 59px;
}
.file_field span {
display: block;
float: left;
width: 140px;
border-right: 1px solid #000;
padding: 0;
margin: 0;
height: 20px;
background-color: #fff;
color: red;
overflow: hidden;
white-space: nowrap;
}
.file_field input[type="file"] {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: Alpha(opacity=0);
}
/* стиль кнопки при фокусе */
.file_field input[type="file"]:focus ~ div {
color: #fff;
}
</style>
</head>
<body>
<div class="file_field">
<input type="file" onchange="this.nextSibling.innerHTML=this.value" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
<input type="file" onchange="this.nextSibling.innerHTML=this.value" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
<input type="file" onchange="this.nextSibling.innerHTML=this.value" /><span></span><div>Browse</div>
</div>
</body>
</html>
