вот полностью рабочий пример, с селектором input[type="file"]:focus ~ div ИЕ почему-то косячет, поэтому пришлось скриптом менять класс.
<!DOCTYPE html>
<html>
<head>
<style>
.file_field {
position: relative;
width: 200px;
height: 22px;
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;
border-radius: 6px;
}
.file_field div {
float: right;
font-size: 15px;
text-align: center;
width: 59px;
padding-top: 1px;
}
.file_field span {
display: block;
float: left;
width: 140px;
border: 1px solid #999;
border-right: 0;
padding: 0;
margin: 0;
height: 20px;
background-color: #fff;
color: red;
overflow: hidden;
white-space: nowrap;
border-radius: 6px 0 0 6px;
}
.file_field input[type="file"] {
position: absolute;
top: 0;
left: 0;
padding-top: 3px;
margin: 0;
border: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: Alpha(opacity=0);
}
/* убираем стандартную пунктирную фокусировку */
.file_field input[type="file"]:focus {
outline: 0;
}
/*
* стиль кнопки при фокусе, класс file_focus нужен для ИЕ
* потому что ИЕ что-то тупит с селектором
* input[type="file"]:focus ~ div
* смотрите события onfocus, onblur
*/
.file_focus div,
.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" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
<input type="file" onchange="this.nextSibling.innerHTML=this.value" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>
<br />
<div class="file_field">
<input type="file" onchange="this.nextSibling.innerHTML=this.value" onfocus="this.parentNode.className='file_field file_focus';" onblur="this.parentNode.className='file_field';" /><span></span><div>Browse</div>
</div>
</body>
</html>
|