Wejście do pliku stylowego z podstawą

Question

Używam fundamentu i nie widziałem niczego w dokumentacji dotyczącej wejścia pliku, tylko ogólne elementy wejściowe. Ale stylizacja pliku wejściowego nie jest taka łatwa. I więcej, jeśli chcesz zachować spójność z projektem całego formularza we wszystkich przeglądarkach.

Widziałem niektóre rozwiązania, takie jak Styling an input type="file" button lub https://github.com/filamentgroup/jQuery-Custom-File-Input, ale chciałem się dowiedzieć, czy istnieje coś konkretnego w podstawach, jak zwykle style div opakowywania nie działają w ogóle (div.large-3.columns itp.) .

Jak to zrobić?

Answer 1

Potrzebujesz tylko przycisku? Lub też pole z adresem pliku? Jeśli tylko przycisk Najprostszym rozwiązaniem jest 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 */ 
} 

również można użyć pseudo-klas dla niektórych przeglądarek see article

Answer 2

Właśnie zastosowano klasę .button do znacznika wejściowego. Wygląda wystarczająco dobrze dla mnie.