定義input type=file 樣式的方法_HTML/Xhtml_網頁製作

為什麼要美化file控制項？試想一下，別的孩子都穿戴整齊漂亮，其中兩個孩子怎麼都不鳥你，太不和諧了。

    原始的file控制項是這樣的：

    別以為這個是由一個text和一個button組合成的，它是一個控制，html代碼為：

複製程式碼

程式碼如下:

既然這樣我們就用一個text和一個button來顯示這個file的樣式，html程式碼是這樣：

複製程式碼

程式碼如下:

外面的一層div是為了提供裡面的input位置參考，因為寫樣式的時候需要相對定位，使真正的file控制項覆蓋在模擬的上面，然後隱藏掉file控制項（即使file控制項不可見），所以css程式碼是這樣的：

複製程式碼
程式碼如下:


.file-box{ 代碼如下:

.file-box{ 代碼如下:
.file-box{ 代碼如下:

.file-box{ 代碼如下: .file-box{ width:340px} .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} .btn{ background-color:#FFF; border:1px solid #CDCDpx; width:70px;} .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } 效果圖：最後留下一個DEMO：點擊查看demo

提示：您可以先修改部分程式碼再執行