type=file的input框樣式修改的方法
關於type="file"的input是啥?
這個是啥我覺得沒必要再說了,反正大家都知道,然後在現在有各種手機的時代,還可以通過直接拍照的方式來上傳,反正比以前好玩多了。
上傳按鈕的樣式調整
玩過CSS的人朋友都知道,在HTML元素中,表單控制元件元素的樣式修改是最痛苦的,很多控制元件的樣式是跟著系統主題來改變的,想要去修改的話,只能模擬來實現,尤其尤其是在IE瀏覽器中。
對於type="file"
這個上傳按鈕,曾經我們修改他的樣式,有人用過模擬的方式,但據說用模擬的方式有可能會出現什麼所謂的安全性問題,好吧,這對於我這樣的一個頁面仔,切圖仔而言,不懂,就算懂了也不知道怎麼去處理。那就不模擬吧……
可是不模擬的話,又要怎麼修改樣式呢?
圖片定位疊加方案
之前的之前,我所知道的方法,其實大家也都知道的方法,就是通過將type="file"
這個上傳按鈕透明後,然後疊加在一個圖片上,這樣就可以讓人感覺是通過點選上傳圖片後實現的,也不用看那個原生的上傳按鈕了。
<input type="file" id="upfile" class="up_input"><span class="up_icon"></span> .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中應該很清晰可以看到實現的方式,通過定位的方式將上傳按鈕定位在圖片之上,圖片可以作為一個空標籤的背景圖片,然後把上傳按鈕的opacity
透明度設定為0
之後就看不到這個按鈕了,但是實際是存在的,然後……然後……就沒有然後了,效果就有了……
針對webkit的方案
這個針對webkit核心的方案其實有點扯,沒多少實際用處,因為只有對webkit核心有效,如果不支援帶-webkit-
字首的寫法,就沒任何效果了,所以各位看官就當娛樂一下看看吧。
<input type="file" id="upfile"> 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中的HTML結構很簡單,就一個input
標籤就可以了,比前面看到的方法簡潔多了,但是對於相容性而言肯定是差多了,不曉得在手機端是怎麼樣,現在手機端大部分都是webkit核心的瀏覽器,算了,且當娛樂,看之樂之吧~
簡單的HTML結構修改樣式完全是依賴於::-webkit-file-upload-button
這個偽元素,針對這個偽元素的樣式做相對應的修改即可了,因為這個是一個普通的按鈕元素而已。這個按鈕元素如果通過展示shadow DOM的方式來檢視的話,我們會更清晰。
這是chrome開發者工具中看到的DOM樹,一般而言,我們如果沒開啟檢視shadow DOM的話,是看不到一個type="file"
的input
中還包含這麼多內容。開啟的方式很簡單,點選開發者工具右上角的齒輪,然後在彈出的層中把這個勾打上就可以了。
現在各位看官可以自行檢視一下其他input
標籤了,如果有shadow DOM的話,必然可以展開。然後在HTML5新的標籤中,有一些也是有的……
最後
對於type="file"
的input
標籤,目前來說,我所知道的可以修改樣式方法就這兩個,然後針對webkit
的方案也很有侷限,但對於手機端來說應該沒什麼問題。或許有人說,那其他瀏覽器怎麼辦啊,是啊,怎麼辦呢,我也不知道。
在Firefox瀏覽器中,雖然有一個選擇符input[type="file"] > button[type="button"]
存在與forms.css中,但是不知道為什麼,我在自己的樣式新增這個選擇符後,還是沒看到任何效果,所以就沒再繼續玩下去了。
PS:對於form.css這個檔案,如果是Firefox瀏覽器的粉絲,必然知道resource://gre-resources/forms.css這個路徑的存在。
哦了,到這裡就結束了,還有一個opera瀏覽器呢,我在mac裡玩的時候,-webkit-
這個字首的樣式直接被繼承了……
附件:
- 上傳按鈕圖片:
相關推薦
type=file的input框樣式修改的方法
關於type="file"的input是啥? 這個是啥我覺得沒必要再說了,反正大家都知道,然後在現在有各種手機的時代,還可以通過直接拍照的方式來上傳,反正比以前好玩多了。 上傳按鈕的樣式調整 玩過CSS的人朋友都知道,在HTML元素中,表單控制元件元素的樣式修改是最痛苦的
Ecshop商品瀏覽歷史樣式修改方法
int includes 需要 url 找到 list itl tle blank 想要修改ECSHOP的瀏覽歷史樣式,發現 history.lbi 中不能修改。 需要修改的文件:includes\lib_insert.php,找到函數:function insert_h
簡單的checkbox多選框樣式修改(純css3)
今天在做專案的時候有需要用到多選框,並且因為ui的關係,需要稍微美化一下多選框,所以找到了實現方法,挺實用的,不需要指令碼就能實現。前端佈局如下:<input class="select-tag-input" type="checkbox" id="tag-id"sty
關於select下拉框樣式修改問題
下拉的箭頭一般是瀏覽器預設的,但是有時候會感覺它很醜或者與實際想要的箭頭效果不一樣。百度總結幾種方法。 1.將瀏覽器預設的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。 select { /*Chrome和Firefox裡面的邊
單選框,複選框樣式修改
1: input[type=radio],input[type=checkbox] { display:inline-block; vertical-align:middle; width:20px; height:20px; margin-left:5px; -webkit-appearance
修改file="type"按鈕樣式的方法
轉自 :https://blog.csdn.net/qq_32623363/article/details/80878408 1、重寫一個新的樣式 2、將預設樣式設定display:none;,即設為不可見 3、在js裡呼叫:當點選新樣式的時候,呼叫這個input的點
js自定義修改復選框單選框樣式,清除復選框單選框默認樣式
radio 技術分享 b2c 如果 watermark css 狀態 初始化 -a 之前做項目的時候,也遇到過需要按照設計稿把<input type="checkbox">和<input type="radio">的默認樣式進行修改,但發現,並沒有可
微信小程序-修改單選框和復選框大小的方法
整體 復選框 col 限制 微信 for 明顯 單選框 模糊 方法有兩種: 一:采用css的zoom屬性 zoom縮放會將元素保持在左上角,並且會有毛邊,可能會稍稍改變元素原來的形狀。 二:采用css3的transform:scale屬性 zoom縮放會將元素保持在中間
對復選框自定義樣式 優化方法
lock 優化 title IE 得到 nbsp 組合 box alt 對復選框自定義樣式,我們以前一直用的腳本來實現,不過現在可以使用新的偽類 :checkbox 來實現。 如果直接對復選框設置樣式,那麽這個偽類並不實用,因為沒有多少樣式能夠對復選框起作用。不過,倒是可
WPF TabIndex預設樣式修改:去掉預設虛線框、自定義樣式(Button控制元件為例)
去掉Tab選中預設虛線框 Tab鍵切換時,被選控制元件自動存在虛線框,有時候為了介面美觀,這個虛線框就顯得比較麻煩。廢話不多說,下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" TargetType="{
淺談vue中style的scoped屬性(修改特定Element元件樣式的方法)
在單頁.vue檔案中,為了保證各元件間的css樣式不衝突,很可能會使用到區域性css,也就是給<style>標籤加上一個scoped屬性(當然也可以用各種命名規則來規避這個問題)。 一開始用的時候感覺很神奇,於是看程式碼查資料瞭解了一下原理。 所謂的區域性css,就是通過vue-lo
自定義單選框樣式方法
元素的初始樣式都不怎麼好看,我們一般修改樣式會想到直接在那元素上新增樣式,比如background、border等,在大多數元素上是可以這麼做,但當遇上了單選框會毫無反應。 例: <!DOCTYPE html> <html lang="en"&
css輸入框placeholder樣式修改以及背景顏色漸變設定
程式碼如下 /* placeholder 樣式設定 */ input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { font-size: 0.16rem; color: #999; font-style:
WPF TabIndex預設樣式修改:去掉預設虛線框、自定義樣式(Button控制元件為例)
去掉Tab選中預設虛線框 Tab鍵切換時,被選控制元件自動存在虛線框,有時候為了介面美觀,這個虛線框就顯得比較麻煩。廢話不多說,下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" Tar
設定input type為text的文字框樣式
CSS 設定 input type="text" 標籤的樣式,而不會影響到 type="checkbox" 或其它input 第一種解決辦法:使用 JS 迴圈控制每個 type="text" 的文字框 <head runat="server"> <
修改系統action bar字型大小、粗細、顏色等樣式的方法
Action bar字型的修改主要還是在xml檔案中完成,對actionbar字型的修改主要思路如下: 根據application 的android:theme 屬性找到他的style(方
修改網頁的alert彈框樣式讓你的頁面更美觀(js封裝之路(1.1))
由於頁面中原來的alert彈框樣式相當的醜,所以就想到了自己去設定一下alert的彈框樣式 首先是自己先設計好一個彈框的樣式可以如下圖: 樣式搭建完成就可以用js來編寫一個alert函數了: js部分如下: function alert(e){ //此處將html中的d
WPF控制元件模板與樣式最方便的修改方法
話就不多說,直接給給個例子 比如要修改工具欄ToolBar的Background, 選擇ToolBar在屬性欄右鍵點Template將值提取到資源(如下圖) 提取到的資源儲存,最好儲存在資源字典裡方便管理. 如提取ToolBar的模板如下 <ControlTempl
設定文字框樣式和修改按鈕樣式
設定文字框樣式 沒有圖片情況下增加白色背景: 1、在res--drawable下新建white_bg.xml檔案,並選擇shape標籤子標籤:①<corners/>:設定圓角。android:radius="5dp":圓角半徑為5dp。②<gradient
關於jsp頁面checkbox複選框的預設樣式的修改(自定義複選框樣式)
checkbox複選框的預設樣式太low,最近做的專案我選擇了自定義樣式,網上找了不少文章內容冗餘,並且並不是都有效果,所以將自己過程整理出來,以備後用。只要在jsp頁面和css樣式表中新增相應程式碼即可:一、jsp頁面:<div class="container"&g