前言

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

不同瀏覽器的file控件表現形式不一樣

火狐

谷歌

IE

不同瀏覽器的file控件基于鼠標點擊的響應不一樣

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

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

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

input file按鈕美化

#input-file input{

font-size: 20px;

border: 1px solid pink;

}

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

input file按鈕美化

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

要點：

1. 為包含input元素的a標簽設置overflow:hidden，用來隱藏超出此區域的控件內容

2. input采用絕對定位，使input控件的右上和a標簽的右上對齊(因為由上面內容可知，不管對于哪種瀏覽器，點擊右側內容，均單擊就可以彈出文件選擇框)

代碼如下

input file按鈕美化

#input-file a{

display:inline-block;

width:100px;

height:40px;

margin: 100px 300px;

background:green;

position:relative;

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

}

#input-file a:hover{

background:pink;

}

#input-file input{

position:absolute;

right:0;

top:0;

//要保證file控件大小大于a標簽的大小

font-size:40px;

/*設置為透明*/

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

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

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

opacity: 0;

}

瀏覽

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

本站內容除特別標注外均為原創，歡迎轉載，但請保留出處！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。