資訊專欄INFORMATION COLUMN
摘要：開啟的方式很簡(jiǎn)單，點(diǎn)擊開發(fā)者工具右上角的齒輪，然后在彈出的層中把這個(gè)勾打上就可以了。對(duì)于這個(gè)文件，如果是瀏覽器的粉絲，必然知道這個(gè)路徑的存在。
關(guān)于type="file"的input是啥？
這個(gè)是啥我覺得沒必要再說了，反正大家都知道，然后在現(xiàn)在有各種手機(jī)的時(shí)代，還可以通過直接拍照的方式來(lái)上傳，反正比以前好玩多了。
并且以前是只能上傳一個(gè)文件，現(xiàn)在的話，只要增加multiple屬性就可以上傳多個(gè)文件，并且還有很多的文件格式支持，廢話不多說，具體請(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)整玩過CSS的人朋友都知道，在HTML元素中，表單控件元素的樣式修改是最痛苦的，很多控件的樣式是跟著系統(tǒng)主題來(lái)改變的，想要去修改的話，只能模擬來(lái)實(shí)現(xiàn)，尤其尤其是在IE瀏覽器中。
對(duì)于type="file"這個(gè)上傳按鈕，曾經(jīng)我們修改他的樣式，有人用過模擬的方式，但據(jù)說用模擬的方式有可能會(huì)出現(xiàn)什么所謂的安全性問題，好吧，這對(duì)于我這樣的一個(gè)頁(yè)面仔，切圖仔而言，不懂，就算懂了也不知道怎么去處理。那就不模擬吧……
可是不模擬的話，又要怎么修改樣式呢？
圖片定位疊加方案之前的之前，我所知道的方法，其實(shí)大家也都知道的方法，就是通過將type="file"這個(gè)上傳按鈕透明后，然后疊加在一個(gè)圖片上，這樣就可以讓人感覺是通過點(diǎn)擊上傳圖片后實(shí)現(xiàn)的，也不用看那個(gè)原生的上傳按鈕了。
.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}
.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}
看一下demo：http://jsbin.com/qacijusihivi/1/
在這個(gè)demo中應(yīng)該很清晰可以看到實(shí)現(xiàn)的方式，通過定位的方式將上傳按鈕定位在圖片之上，圖片可以作為一個(gè)空標(biāo)簽的背景圖片，然后把上傳按鈕的opacity透明度設(shè)置為0之后就看不到這個(gè)按鈕了，但是實(shí)際是存在的，然后……然后……就沒有然后了，效果就有了……
針對(duì)webkit的方案這個(gè)針對(duì)webkit內(nèi)核的方案其實(shí)有點(diǎn)扯，沒多少實(shí)際用處，因?yàn)橹挥袑?duì)webkit內(nèi)核有效，如果不支持帶-webkit-前綴的寫法，就沒任何效果了，所以各位看官就當(dāng)娛樂一下看看吧。
input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}
先看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)娛樂，看之樂之吧～
簡(jiǎn)單的HTML結(jié)構(gòu)修改樣式完全是依賴于::-webkit-file-upload-button這個(gè)偽元素，針對(duì)這個(gè)偽元素的樣式做相對(duì)應(yīng)的修改即可了，因?yàn)檫@個(gè)是一個(gè)普通的按鈕元素而已。這個(gè)按鈕元素如果通過展示shadow DOM的方式來(lái)查看的話，我們會(huì)更清晰。
這是chrome開發(fā)者工具中看到的DOM樹，一般而言，我們?nèi)绻麤]開啟查看shadow DOM的話，是看不到一個(gè)type="file"的input中還包含這么多內(nèi)容。開啟的方式很簡(jiǎn)單，點(diǎn)擊開發(fā)者工具右上角的齒輪，然后在彈出的層中把這個(gè)勾打上就可以了。
現(xiàn)在各位看官可以自行查看一下其他input標(biāo)簽了，如果有shadow DOM的話，必然可以展開。然后在HTML5新的標(biāo)簽中，有一些也是有的……
最后對(duì)于type="file"的input標(biāo)簽，目前來(lái)說，我所知道的可以修改樣式方法就這兩個(gè)，然后針對(duì)webkit的方案也很有局限，但對(duì)于手機(jī)端來(lái)說應(yīng)該沒什么問題?；蛟S有人說，那其他瀏覽器怎么辦啊，是啊，怎么辦呢，我也不知道。
在Firefox瀏覽器中，雖然有一個(gè)選擇符input[type="file"] > button[type="button"]存在與forms.css中，但是不知道為什么，我在自己的樣式添加這個(gè)選擇符后，還是沒看到任何效果，所以就沒再繼續(xù)玩下去了。
PS：對(duì)于form.css這個(gè)文件，如果是Firefox瀏覽器的粉絲，必然知道resource://gre-resources/forms.css這個(gè)路徑的存在。
哦了，到這里就結(jié)束了，還有一個(gè)opera瀏覽器呢，我在mac里玩的時(shí)候，-webkit-這個(gè)前綴的樣式直接被繼承了……
附件：上傳按鈕圖片：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110943.html
摘要：欲實(shí)現(xiàn)一個(gè)文字搜索的功能，要求輸入時(shí)，鍵盤回車按鈕提示顯示為搜索。于是幾經(jīng)，得到答案設(shè)置去掉彈出的下拉框?qū)⒛J(rèn)的隱藏掉針對(duì)設(shè)置樣式去除下橢圓形同時(shí)別忘記，如果提交搜索時(shí)想使用，那么可以阻止表單的默認(rèn)行為 欲實(shí)現(xiàn)一個(gè)文字搜索的功能，要求輸入時(shí)，鍵盤回車按鈕提示顯示為搜索。效果如下:showImg(https://segmentfault.com/img/remote/1460000007...
摘要：主要通過樣式為其賦予不同的表現(xiàn)標(biāo)簽用來(lái)定義內(nèi)聯(lián)行內(nèi)元素，并無(wú)實(shí)際的意義。html文檔結(jié)構(gòu) 1 DOCTYPE html> 2 <html lang="zh-CN"> #這個(gè)lang表示語(yǔ)言，zh-CN中文的意思，整個(gè)文檔的內(nèi)容以中文為主，如果以英文為主，就寫成lang=en 3 4 <head> 5 <meta charset...
摘要：背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。 背景 之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...
摘要：背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。 背景 之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...
如何利用JS實(shí)現(xiàn)新聞自動(dòng)輪播效果，現(xiàn)在看看具體代碼：這是原生js實(shí)現(xiàn)新聞?shì)啿バЧ?，且附詳?xì)注釋 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=dev...
閱讀 1483·2021-10-11 10:59
閱讀 3175·2019-08-30 15:54
閱讀 2813·2019-08-30 13:19
閱讀 2512·2019-08-30 13:02
閱讀 2434·2019-08-30 10:57
閱讀 3397·2019-08-29 15:40
閱讀 1047·2019-08-29 15:39
閱讀 2390·2019-08-29 12:40
