基礎的樣式文件輸入

我正在使用基礎，並且在文檔輸入中沒有看到任何內容，只有一般輸入元素。但是設計文件輸入並不容易。如果你想在所有瀏覽器中保持與整個表單的設計一致，那麼更多。基礎的樣式文件輸入

我見過一些解決方案，如Styling an input type="file" button或https://github.com/filamentgroup/jQuery-Custom-File-Input，但我想知道是否有什麼特定的基礎，因爲通常的包裝div樣式根本不起作用（div.large-3.columns等）。

你怎麼做到的？

來源

2013-05-17 josal

你只需要按鈕？還是帶有文件地址的字段？如果只有按鈕simpliest解決方案是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

來源

2013-05-17 10:48:32 Vicky

這是一個非常簡單的選項，謝謝你的答案。但是，它會非常有用，恕我直言，以顯示文件地址或至少一個指示器說，該文件已被加載:)因此，也許最簡單的解決方案將風格現有的文件輸入元素，包括文件地址字段。 .. – josal

我剛申請了.button類的輸入標籤。它對我來說看起來不錯。

來源

2013-06-18 12:01:05 Vineonardo

它不會爲輸入文件顯示與其餘輸入字段相同的樣式。 – josal

基礎的樣式文件輸入

回答

相關問題