關於input type = "file" 樣式的美化
阿新 • • 發佈:2018-11-28
首先,<input type = "file">的預設樣式是這樣的:
預設的樣式直接放到網頁中總覺得不太協調,於是我在網上查詢它的美化方法。大方向上基本是用CSS美化,但細化到具體的美化方式則多種多樣。在眼花繚亂之下找到了這篇文章:修改 input type=file 的樣式的最簡單方法
什麼?最簡單方法?我來看一看你有多簡單。
以下是作者的思路:
1、重寫一個新的樣式 ;
2、將預設的樣式設為
display:none
,即設為不可見 ;3、在js裡呼叫:當點選新樣式的時候,呼叫這個
input
的點選事件。
實現方式:
這裡我和該文作者一樣,使用css+js(jquery)的方式美化。
HTML部分 使用一個div,把一個<button>和<input type = "file">包裹起來:
<div id="button">
<button id="upload">上傳圖片</button>
<input type="file" id="fileul">
</div>
css部分:
#fileul{ display: none; }
js部分 這裡我同樣使用了jquery:
$(document).ready(function(){
$('#upload').click(function(){
$('#fileul').click()
});
});
最終效果:
最終效果呈現為一個按鈕,點選後觸發對input的點選事件,彈出檔案選擇的對話方塊。