Ввод файла сложения с основанием

Question

Я использую основу, и я ничего не видел в документации относительно ввода файла, а только общие элементы ввода. Но стиль ввода файлов не так прост. И еще, если вы хотите сохранить его согласованным с дизайном всей формы во всех браузерах.

Я видел некоторые решения, такие как Styling an input type="file" button или https://github.com/filamentgroup/jQuery-Custom-File-Input, но я хотел знать, есть ли что-то конкретное в основании, так как обычные стили div div не работают вообще (div.large-3.columns и т. Д.), ,

Как вы это делаете?

Answer 1

Вам нужна только кнопка? Или поле с адресом файла тоже? Если только кнопка Простейшего решения demo

<a class="wrapper"> 
    button name 
    <input type="file"/> 
</a> 

.wrapper { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
} 
input { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    font-size: 50px; /* some huge for cursor pointer hack */ 
} 

также вы можете использовать псевдо-классы для некоторых браузеров see article

Answer 2

Я просто применил класс .button к входной метке. Это выглядит достаточно хорошо для меня.