使用css自定义input file浏览按钮样式

CSS 小智 834℃ 0评论

前言

文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式。

不同浏览器的file控件表现形式不一样

火狐
input-file-firefox
谷歌
input-file-chrome
IE
input-file-ie11

不同浏览器的file控件基于鼠标点击的响应不一样

IE11,谷歌,火狐中单击file控件文本区域可以弹出文件选择框,而ie10及以前版本则需要双击file控件的文本区域

设置input的font-size属性,各个浏览器的控件大小均发生了变化

font-size : 该属性规定 input元素中文本的尺寸大小。

<!DOCTYPE html>
<html>
<head>
<title>input file按钮美化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

	#input-file input{
		font-size: 20px;
		border: 1px solid pink;
	}
</style>
</head>
<body>
<div id="input-file">
	<input type="file" value="浏览" />
</div>
</body>
</html>

IE,谷歌,火狐浏览器,file控件大小均发生了变化,以谷歌为例:
input-file-chrome-4

input file按钮美化

思路:采用a标签自定义一个我们需要的按钮,然后包含一个真正起作用的input[type=file]控件
要点:

1. 为包含input元素的a标签设置overflow:hidden,用来隐藏超出此区域的控件内容
2. input采用绝对定位,使input控件的右上和a标签的右上对齐(因为由上面内容可知,不管对于哪种浏览器,点击右侧内容,均单击就可以弹出文件选择框)
代码如下

<!DOCTYPE html>
<html>
<head>
<title>input file按钮美化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	#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;
	}
</style>
</head>
<body>
<div id="input-file">
	<a href="javascript:;">浏览
	    <input type="file" value="浏览" />
	</a>
</div>
</body>
</html>

感谢:
http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html

本文固定链接:心知博客 » 使用css自定义input file浏览按钮样式
本站内容除特别标注外均为原创,欢迎转载,但请保留出处!

喜欢 (2)
发表我的评论
取消评论
表情

请填写您的昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址