首頁 > web前端 > html教學 > input file自訂按鈕美化(演示)_HTML/Xhtml_網頁製作

input file自訂按鈕美化(演示)_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:40:48
原創
1502 人瀏覽過

以前寫過這樣的文章但是用了js腳本,優點是可以顯示檔案路徑。

如果可以不要看到路徑,只顯示自訂按鈕,另有其方法,以下只是用用了css的技巧來實現。

關鍵是給了file檔案域給了font-size,設定一個比較大的值,使其表單大寫改變(各瀏覽器外觀不同,但大寫都改變了)如下圖:

input{font-size:100px;}

再用position定位,和透明度達到自己想要的效果。具體程式碼如下:

複製程式碼
程式碼如下:


程式碼如下:

.file. > height:256px;
background:url(http://files.jb51.net/file_images/article/201212/2012122514125641.png);
position:relative;

.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0 top🎜> position:absolute;
right:0 top🎜> ;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}

複製程式碼


程式碼如下:

DEMO:
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板