RMCreative.ru - Блог Голосов: 1 Адрес блога: http://rmcreative.ru/feed/ Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL

Свой input[type=file] 2

Нашлось ещё одно решение проблемы стилизации input[type=file], о которой я уже писал. Прошлое решение не требует JavaScript для самой подмены кнопки, но всё-равно требует его для эмуляции hover и title.

Второе решение требует минимума JavaScript, точно работает в IE7+, Opera, Chrome, Safari, FF, никак не ограничивает в стилизации кнопки и изначально не имеет проблем с hover и title:

document.getElementById('trigger').onclick = function(){
    document.getElementById('file').click();
}

Ну и немного CSS:

#file {
    // уводим input[type=file] подальше за экран
    position: absolute;
    left: -100000px;
}
 
#trigger {
    // исключительно внешний вид кнопки
    // на вкус и цвет
    border: 1px solid #ccc;
    background: #eee;
    color: #060;
    font-size: 30px;
    line-height: 1;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    width: 40px;
}

За идею и тестирование в IE дружно говорим спасибо creocoder-у.