Miałem cholernie dużo czasu, próbując to osiągnąć. Nie chciałem używać rozwiązania Flash, a żadna z bibliotek jQuery, które oglądałem, nie była niezawodna we wszystkich przeglądarkach.
Wymyśliłem własne rozwiązanie, które jest zaimplementowane w całości w CSS (z wyjątkiem zmiany stylu onclick, która powoduje, że przycisk wygląda na „kliknięty”).
Możesz wypróbować działający przykład tutaj: http://jsfiddle.net/VQJ9V/307/ (testowane w FF 7, IE 9, Safari 5, Opera 11 i Chrome 14)
Działa poprzez utworzenie dużego pliku wejściowego (z rozmiarem czcionki: 50px), a następnie zawijanie go w element div o stałym rozmiarze i przepełnieniu: ukryty. Dane wejściowe są wtedy widoczne tylko przez ten element div „window”. Elementowi DIV można nadać obraz lub kolor tła, można dodać tekst, a dane wejściowe można uczynić przezroczystymi, aby odsłonić tło elementu DIV:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
Daj mi znać, jeśli są z tym jakieś problemy, a postaram się je naprawić.