input元素[type="file"]時(shí)的樣式定制及瀏覽器兼容性問題探討
發(fā)布時(shí)間：2013-06-03 11:34:06 作者：佚名 
我要評論
我要評論input元素[type=file]時(shí)的樣式定制一直以來都是瀏覽器兼容方面的一個(gè)問題，下面針對不同瀏覽器下對input[type=file]的樣式定制進(jìn)行探討，感興趣的朋友可以參考下哈
這兩天在做百姓網(wǎng)的筆試題的時(shí)候遇到了這樣一個(gè)問題，用 HTML5 的新特性實(shí)現(xiàn)百姓網(wǎng)現(xiàn)有的一個(gè)模塊，在百姓網(wǎng)中逛了一陣后最終選定了發(fā)布信息所用的表單模塊，原因很簡單，在 HTML5 中針對表單有很多新特性可以使用，這些新特性也很有實(shí)用性，畢竟有表單的地方實(shí)在是太多了，比如注冊啦，登錄啦，發(fā)帖啦......（喂，有點(diǎn)跑題了親。）
這個(gè)時(shí)候，我看到原始網(wǎng)頁中的表單里有這么個(gè)元素
我的第一反應(yīng)就是，哈，input元素而已，用CSS定制一下樣式就可以了，然后我很自然的準(zhǔn)備“右鍵”-“審查元素”來看看具體的樣式百姓網(wǎng)是怎么寫的以后發(fā)現(xiàn)......
一定是我的打開方式不對......既然這樣，當(dāng)然是自己動手豐衣足食了，有一點(diǎn)我可以確認(rèn)的是，這種上傳文件的表單控件跑不了是要用input[type="file"]的，好吧，直接添加這么一行代碼：
<input type="file" />
在chrome瀏覽器中刷新看看：
毫無疑問，這是預(yù)設(shè)的樣式，而且我發(fā)現(xiàn)這種預(yù)設(shè)的樣式還很不好修改，最讓人惱火的是，不同的瀏覽器預(yù)設(shè)的樣式都是不一樣的，借用網(wǎng)上的一張圖片就很清楚了：
（所以我就說嘛，你們這些瀏覽器一點(diǎn)都不聽話，彼此之間又不好好溝通，自high得特別爽，苦的可是前端的同學(xué)啊你妹）
不過辦法還是很好想到的，用一個(gè)元素把 input 包裹起來，在元素中添加所需要的其他元素，并設(shè)置樣式，做成需要達(dá)到的效果，將 input 元素的 position 值設(shè)為 absolute 填充外圍元素，再將 input 透明即可。
HTML代碼如下：
<div id="input-file">
<span id="text">點(diǎn)擊上傳</span>
<input id="file" type="file" />
</div>
對應(yīng)的CSS代碼如下：
#input-file {
position: relative; /* 保證子元素的定位 */
width: 120px;
height: 30px;
background: #eee;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
#text {
display: inline-block;
margin-top: 5px;
color: #666;
font-family: "黑體";
font-size: 18px;
}
#file {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px; /* 寬高和外圍元素保持一致 */
height: 30px;
opacity: 0;
-moz-opacity: 0; /* 兼容老式瀏覽器 */
filter: alpha(opacity=0); /* 兼容IE */
}
顯示效果如圖：
八過，這里仍有一個(gè)bug，當(dāng)做成這樣的按鈕時(shí)，當(dāng)鼠標(biāo)懸停時(shí)應(yīng)該是可點(diǎn)擊狀態(tài)，但即使給所有元素都添加了 cursor: pointer; 屬性，仍然會有某些區(qū)域顯示為指針狀態(tài)，有沒有高手能夠解決呢？
這個(gè)時(shí)候，我看到原始網(wǎng)頁中的表單里有這么個(gè)元素
我的第一反應(yīng)就是，哈，input元素而已，用CSS定制一下樣式就可以了，然后我很自然的準(zhǔn)備“右鍵”-“審查元素”來看看具體的樣式百姓網(wǎng)是怎么寫的以后發(fā)現(xiàn)......
一定是我的打開方式不對......既然這樣，當(dāng)然是自己動手豐衣足食了，有一點(diǎn)我可以確認(rèn)的是，這種上傳文件的表單控件跑不了是要用input[type="file"]的，好吧，直接添加這么一行代碼：
復(fù)制代碼
代碼如下:<input type="file" />
在chrome瀏覽器中刷新看看：
毫無疑問，這是預(yù)設(shè)的樣式，而且我發(fā)現(xiàn)這種預(yù)設(shè)的樣式還很不好修改，最讓人惱火的是，不同的瀏覽器預(yù)設(shè)的樣式都是不一樣的，借用網(wǎng)上的一張圖片就很清楚了：
（所以我就說嘛，你們這些瀏覽器一點(diǎn)都不聽話，彼此之間又不好好溝通，自high得特別爽，苦的可是前端的同學(xué)啊你妹）
不過辦法還是很好想到的，用一個(gè)元素把 input 包裹起來，在元素中添加所需要的其他元素，并設(shè)置樣式，做成需要達(dá)到的效果，將 input 元素的 position 值設(shè)為 absolute 填充外圍元素，再將 input 透明即可。
HTML代碼如下：
復(fù)制代碼
代碼如下:<div id="input-file">
<span id="text">點(diǎn)擊上傳</span>
<input id="file" type="file" />
</div>
對應(yīng)的CSS代碼如下：
復(fù)制代碼
代碼如下:#input-file {
position: relative; /* 保證子元素的定位 */
width: 120px;
height: 30px;
background: #eee;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
#text {
display: inline-block;
margin-top: 5px;
color: #666;
font-family: "黑體";
font-size: 18px;
}
#file {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px; /* 寬高和外圍元素保持一致 */
height: 30px;
opacity: 0;
-moz-opacity: 0; /* 兼容老式瀏覽器 */
filter: alpha(opacity=0); /* 兼容IE */
}
顯示效果如圖：
八過，這里仍有一個(gè)bug，當(dāng)做成這樣的按鈕時(shí)，當(dāng)鼠標(biāo)懸停時(shí)應(yīng)該是可點(diǎn)擊狀態(tài)，但即使給所有元素都添加了 cursor: pointer; 屬性，仍然會有某些區(qū)域顯示為指針狀態(tài)，有沒有高手能夠解決呢？
相關(guān)文章
關(guān)于type="file"的input框樣式修改小結(jié)
表單中的input type=”file”在前端開發(fā)中經(jīng)常會用到，但是很悲劇的是input type=”file”在各個(gè)瀏覽器下表現(xiàn)不統(tǒng)一，樣式很難起作用；那么我們?nèi)绾蝸硖幚磉@個(gè)問題呢，這就2014-09-28- 當(dāng)我們想要用css美化表單的時(shí)候，有兩個(gè)控件就會和前段人員作對，一個(gè)是是大名鼎鼎的select，另一個(gè)就是我現(xiàn)在要說說的input type=file2011-10-24
HTML中文件上傳時(shí)使用的<input type="file">元素的樣式自定義
這篇文章主要介紹了HTML中文件上傳時(shí)使用的<input type="file">元素的樣式自定義的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-29