關(guān)于type="file"的input框樣式修改小結(jié)

這個(gè)是啥我覺(jué)得沒(méi)必要再說(shuō)了,反正大家都知道,然后在現(xiàn)在有各種手機(jī)的時(shí)代,還可以通過(guò)直接拍照的方式來(lái)上傳,反正比以前好玩多了。
并且以前是只能上傳一個(gè)文件,現(xiàn)在的話,只要增加multiple屬性就可以上傳多個(gè)文件,并且還有很多的文件格式支持,廢話不多說(shuō),具體請(qǐng)看http://www.w3.org/html/ig/zh/wiki/HTML5/number-state#.E6.96.87.E4.BB.B6.E4.B8.8A.E4.BC.A0.E7.8A.B6.E6.80.81
上傳按鈕的樣式調(diào)整玩過(guò)CSS的人朋友都知道,在HTML元素中,表單控件元素的樣式修改是最痛苦的,很多控件的樣式是跟著系統(tǒng)主題來(lái)改變的,想要去修改的話,只能模擬來(lái)實(shí)現(xiàn),尤其尤其是在IE瀏覽器中。
對(duì)于type="file"這個(gè)上傳按鈕,曾經(jīng)我們修改他的樣式,有人用過(guò)模擬的方式,但據(jù)說(shuō)用模擬的方式有可能會(huì)出現(xiàn)什么所謂的安全性問(wèn)題,好吧,這對(duì)于我這樣的一個(gè)頁(yè)面仔,切圖仔而言,不懂,就算懂了也不知道怎么去處理。那就不模擬吧……
可是不模擬的話,又要怎么修改樣式呢?
圖片定位疊加方案之前的之前,我所知道的方法,其實(shí)大家也都知道的方法,就是通過(guò)將type="file"這個(gè)上傳按鈕透明后,然后疊加在一個(gè)圖片上,這樣就可以讓人感覺(jué)是通過(guò)點(diǎn)擊上傳圖片后實(shí)現(xiàn)的,也不用看那個(gè)原生的上傳按鈕了。
看一下demo:http://jsbin.com/qacijusihivi/1/
在這個(gè)demo中應(yīng)該很清晰可以看到實(shí)現(xiàn)的方式,通過(guò)定位的方式將上傳按鈕定位在圖片之上,圖片可以作為一個(gè)空標(biāo)簽的背景圖片,然后把上傳按鈕的opacity透明度設(shè)置為0之后就看不到這個(gè)按鈕了,但是實(shí)際是存在的,然后……然后……就沒(méi)有然后了,效果就有了……
針對(duì)webkit的方案這個(gè)針對(duì)webkit內(nèi)核的方案其實(shí)有點(diǎn)扯,沒(méi)多少實(shí)際用處,因?yàn)橹挥袑?duì)webkit內(nèi)核有效,如果不支持帶-webkit-前綴的寫法,就沒(méi)任何效果了,所以各位看官就當(dāng)娛樂(lè)一下看看吧。
先看demo:http://jsbin.com/wicihihabifi/1/
在這個(gè)demo中的HTML結(jié)構(gòu)很簡(jiǎn)單,就一個(gè)[input標(biāo)簽就可以了,比前面看到的方法簡(jiǎn)潔多了,但是對(duì)于兼容性而言肯定是差多了,不曉得在手機(jī)端是怎么樣,現(xiàn)在手機(jī)端大部分都是webkit內(nèi)核的瀏覽器,算了,且當(dāng)娛樂(lè),看之樂(lè)之吧~
簡(jiǎn)單的HTML結(jié)構(gòu)修改樣式完全是依賴于::-webkit-file-upload-button這個(gè)偽元素,針對(duì)這個(gè)偽元素的樣式做相對(duì)應(yīng)的修改即可了,因?yàn)檫@個(gè)是一個(gè)普通的按鈕元素而已。這個(gè)按鈕元素如果通過(guò)展示shadow DOM的方式來(lái)查看的話,我們會(huì)更清晰。
這是chrome開(kāi)發(fā)者工具中看到的DOM樹(shù),一般而言,我們?nèi)绻麤](méi)開(kāi)啟查看shadow DOM的話,是看不到一個(gè)type="file"的input中還包含這么多內(nèi)容。開(kāi)啟的方式很簡(jiǎn)單,點(diǎn)擊開(kāi)發(fā)者工具右上角的齒輪,然后在彈出的層中把這個(gè)勾打上就可以了。
現(xiàn)在各位看官可以自行查看一下其他input標(biāo)簽了,如果有shadow DOM的話,必然可以展開(kāi)。然后在HTML5新的標(biāo)簽中,有一些也是有的……
最后對(duì)于type="file"的input標(biāo)簽,目前來(lái)說(shuō),我所知道的可以修改樣式方法就這兩個(gè),然后針對(duì)webkit的方案也很有局限,但對(duì)于手機(jī)端來(lái)說(shuō)應(yīng)該沒(méi)什么問(wèn)題?;蛟S有人說(shuō),那其他瀏覽器怎么辦啊,是啊,怎么辦呢,我也不知道。
在Firefox瀏覽器中,雖然有一個(gè)選擇符input type="file" > button[type="button"]存在與forms.css中,但是不知道為什么,我在自己的樣式添加這個(gè)選擇符后,還是沒(méi)看到任何效果,所以就沒(méi)再繼續(xù)玩下去了。
PS:對(duì)于form.css這個(gè)文件,如果是Firefox瀏覽器的粉絲,必然知道resource://gre-resources/forms.css這個(gè)路徑的存在。
哦了,到這里就結(jié)束了,還有一個(gè)opera瀏覽器呢,我在mac里玩的時(shí)候,-webkit-這個(gè)前綴的樣式直接被繼承了……
附件:上傳按鈕圖片:
相關(guān)文章
input元素[type="file"]時(shí)的樣式定制及瀏覽器兼容性問(wèn)題探討
input元素[type=file]時(shí)的樣式定制一直以來(lái)都是瀏覽器兼容方面的一個(gè)問(wèn)題,下面針對(duì)不同瀏覽器下對(duì)input[type=file]的樣式定制進(jìn)行探討,感興趣的朋友可以參考下哈2013-06-03- 當(dāng)我們想要用css美化表單的時(shí)候,有兩個(gè)控件就會(huì)和前段人員作對(duì),一個(gè)是是大名鼎鼎的select,另一個(gè)就是我現(xiàn)在要說(shuō)說(shuō)的input type=file2011-10-24
HTML中文件上傳時(shí)使用的<input type="file">元素的樣式自定義
這篇文章主要介紹了HTML中文件上傳時(shí)使用的<input type="file">元素的樣式自定義的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-29