Стилизация «входного файла» - отлично работает, но есть небольшая проблема - PullRequest
Новая
       2

Стилизация «входного файла» - отлично работает, но есть небольшая проблема

0 голосов
/ 12 июля 2010

Я использую Firefox 3.6.6 .

Я ввел свой «входной файл», который выглядит следующим образом:

http://i32.tinypic.com/xfayxs.jpg

Вот код: (живой пример здесь )

HTML: 

<div id="wrapper">
    <div id="customButton">
        <img src="http://i28.tinypic.com/2nv5lww.png" />
        <span>Choose Files</span>
    </div>
    <input id="fileInput" type="file" size="1" />
</div>

CSS: 

#wrapper {
    position: relative;
    width: 339px;
    height: 66px;
    background: -moz-linear-gradient(-70deg, 
                                     rgba(1, 36, 68, 0.9), 
                                     rgba(10, 103, 196, 0.9));
    -moz-box-shadow: inset -20px -20px 20px -20px rgba(0, 0, 0, 0.9), 
                     inset 20px 20px 20px -20px rgba(255, 255, 255, 0.7);
}
#fileInput {
    opacity: 0;
    font-size: 50px;
}
img {
    width: 45px;
    height: 45px;
    position: absolute;
    left: 35px;
    top: 12px;
}
span {
    position: absolute;
    left: 95px;
    top: 7px;
    font-size: 40px;
    color: white;
}

Единственная проблема заключается в том, чтокогда мышь находится над этой пользовательской кнопкой, курсор изменяется между text и default из-за базового «входного файла» (который не виден).

У кого-нибудь есть идеи, как мне установитькурсор на pointer, например, когда мышь наводит на кнопку?

Большое спасибо !!

1 Ответ

0 голосов
/ 12 июля 2010 
<input id="fileInput" style="display: none;" type="file" size="1" />

кажется, что он работает с вами, спрятать его и поставить курсор: указатель на обертку

...