前言

文件上傳用途非常廣泛，瀏覽器自帶文件控件不太美觀，很多時候不能滿足需求，需要自定義input [type=file]的樣式。

不同瀏覽器的file控件表現(xiàn)形式不一樣

火狐

谷歌

IE

不同瀏覽器的file控件基于鼠標(biāo)點(diǎn)擊的響應(yīng)不一樣

IE11，谷歌，火狐中單擊file控件文本區(qū)域可以彈出文件選擇框，而ie10及以前版本則需要雙擊file控件的文本區(qū)域

設(shè)置input的font-size屬性，各個瀏覽器的控件大小均發(fā)生了變化

font-size ： 該屬性規(guī)定 input元素中文本的尺寸大小。

input file按鈕美化

#input-file input{

font-size: 20px;

border: 1px solid pink;

}

IE,谷歌,火狐瀏覽器，file控件大小均發(fā)生了變化，以谷歌為例：

input file按鈕美化

思路：采用a標(biāo)簽自定義一個我們需要的按鈕，然后包含一個真正起作用的input[type=file]控件

要點(diǎn)：

1. 為包含input元素的a標(biāo)簽設(shè)置overflow:hidden，用來隱藏超出此區(qū)域的控件內(nèi)容

2. input采用絕對定位，使input控件的右上和a標(biāo)簽的右上對齊(因?yàn)橛缮厦鎯?nèi)容可知，不管對于哪種瀏覽器，點(diǎn)擊右側(cè)內(nèi)容，均單擊就可以彈出文件選擇框)

代碼如下

input file按鈕美化

#input-file a{

display:inline-block;

width:100px;

height:40px;

margin: 100px 300px;

background:green;

position:relative;

overflow:hidden;/*隱藏超出區(qū)域，此屬性很重要*/

}

#input-file a:hover{

background:pink;

}

#input-file input{

position:absolute;

right:0;

top:0;

//要保證file控件大小大于a標(biāo)簽的大小

font-size:40px;

/*設(shè)置為透明*/

filter:alpha(opacity=0); /* IE */

-moz-opacity:0; /* 老版Mozilla */

-khtml-opacity:0; /* 老版Safari */

opacity: 0;

}

瀏覽

本文固定鏈接：心知博客 ? 使用css自定義input file瀏覽按鈕樣式

本站內(nèi)容除特別標(biāo)注外均為原創(chuàng)，歡迎轉(zhuǎn)載，但請保留出處！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。