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

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