Web頁面中inputtype=file元素怎么用

本篇內(nèi)容主要講解“Web頁面中inputtype=file元素怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Web頁面中inputtype=file元素怎么用”吧!

　　Web頁面中，在需要上傳文件時基本都會用到inputtype=file元素，它的默認樣式：chrome下：IE下：不管是上面哪種，樣式都比較簡單，和很多網(wǎng)頁的風格都不太協(xié)調(diào)。根據(jù)用戶的需求，設(shè)計風格，改變其顯示樣式的場合就比較多了。如果，要像下面一樣做一個bootstrap風格的上傳按鈕該如何實現(xiàn)。

　　搭建上傳按鈕所需的inputtype=file元素

　　復(fù)制代碼代碼如下:spanspan上傳/spaninputtype="file"/span效果（chrome）：現(xiàn)在看到的分兩行顯示。外圍之所以沒有換成div，是因為在IE7-瀏覽器中，只要不是設(shè)成inline，它的寬度全都會撐開到能撐到的寬度。如果設(shè)成inline，那元素的寬度就無法調(diào)整，所以這里用span然后設(shè)成inline-block能解決這樣的問題。

　　inputtype=file元素怎么用

　　增加樣式將兩行變成一行

　　復(fù)制代碼代碼如下:span"span上傳/spaninputtype="file"/spancss:

　　復(fù)制代碼代碼如下:.fileinput-button{position:relative;display:inline-block;}.fileinput-buttoninput{position:absolute;right:0px;top:0px;}效果：默認是沒有淺藍色邊框，只有鼠標去點擊后，才會顯示，這里顯示出來是為了看得清楚。通過將外圍的span設(shè)成display:relative，將input設(shè)成display:absolute的方式讓他們都脫離文檔流。通過將input限定在外圍的span中進行絕對定位的方式讓本來兩行顯示的變成一行顯示。實際上這里已經(jīng)overflow了，真正的寬度是上傳文字的寬度，修改fileinput-button樣式增加overflow:hidden

　　復(fù)制代碼代碼如下:.fileinput-button{position:relative;display:inline-block;overflow:hidden;}效果：很有意思，能看到上邊后右邊的藍色邊框了吧，其實就是把左邊和下邊的溢出部分給隱藏了。這時候用鼠標去點擊上傳兩個字實際上是點在input上，能夠顯示打開對話框，因為顯示層級上input要比上傳更靠近用戶。注意input定位中的right，為什么不用left定位。

到此，相信大家對“Web頁面中inputtype=file元素怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！