怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式

前言

文件上传用途非常广泛，浏览器自带文件控件不太美观，很多时候不能满足需求，需要自定义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浏览按钮样式

本站内容除特别标注外均为原创，欢迎转载，但请保留出处！