воскресенье, 21 октября 2012 г.

Изменить кнопку загрузки файла

Все просто, никакого JS, просто меняем стили (ну не совсем просто, если вы оказались на этой странице). Если все сделать правильно, кнопка загрузки файлов больше не будет такой ущербной. По примеру можно сделать ее и в своем стиле.

регистрация доменов

HTML
<div class="container upload">    <span class="btn">Добавить файл</span>    <input type="file"/></div>    
..и немного стилей:
CSS
.container {
width:300px;
margin:50px auto 0;
height:80px;
}
.upload {
position:relative;
}
.upload > input[type=file] {
display:block;
width:100%;
height:100%;
opacity:0;
}
.upload > .btn {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#efefef;
color:#555;
border:solid 1px #ddd;
border-radius:4px;
text-align:center;
font-size:2em;
line-height: 80px;
z-index:0;
}
.upload:hover > .btn {
background:#f7f7f7;
color:#333;
}
.upload:active > .btn {
background:#efefef;
color:#333;
margin-top:1px;
} ​
Вот и все! до невозможности просто)
Посмотреть как это выглядит можно здесь