文章出處
文章列表
一般我們設計的上傳按鈕都是和整個頁面風格相似的樣式，不會使用html原生態的上傳按鈕，但是怎么既自定義自己的樣式，又能使用file控件功能呢？
思路是這樣的：
1.定義一個相對定位的DIV，按照整成步驟實現自己的結構和樣式；
2.在DIV里添加<input type="file" class="my-file">
3.將file控件絕對定位，寬度和高度全部覆蓋掉父元素，并且設置透明度為0.
實現代碼如下：
.my-file { cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; opacity: 0; filter: alpha(opacity=0); font-size: 120px; }
大致工作基本完成，但是這里有在IE8里有一個小問題，這里就是為什么要給file加一個 font-size: 120px 的原因。
這是控件的原生樣式，chrome里點擊沒問題，但是在IE8里，點擊范圍只有瀏覽按鈕那個區域
設置字體大小后，人為的擴大了按鈕的點擊范圍，所以這時候點擊整個DIV范圍都可以彈出文件框。
文章列表
全站熱搜
留言列表
