如何修改file控件

最新推荐文章于 2024-09-18 10:38:08 发布

weixin_30335353

最新推荐文章于 2024-09-18 10:38:08 发布

阅读量100

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/aTeddy/p/3643095.html

版权

在移动web开发过程中，常常会用到input file这控件，但css不能修改其样式往往让开发者很头疼，直接把他放到页面上又不美观；

下面介绍的方法，可以将该控件的显示样式替换成一个图标；

该方法主要思路是：在带有input file的表单外面增加一个<a>标签，设置<a>标签的背景，并用透明度隐藏input标签。

在页面上显示的效果如下图，经测试ios5+，android2.3+的自带浏览器都较好的兼容该效果。

代码如下：

HTML

View Code HTML

<a class="fileStyle" href="javascript:;">
<input class="“upload_file&quot;" id="addfile" type="file" accept="image/*" />
</a>

CSS

View Code CSS

.messagePlan .imgUpload .fileStyle {
	width: 60px;
	height: 60px;
	background: url(../../images/addImg.jpg) #fff center center no-repeat;
	float: left;
	border: 2px dashed #ccc;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	cursor: pointer;
	overflow:hidden;
	display:block;
	position:relative;
}
.upload_file{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	bottom:0;
}

转载于:https://www.cnblogs.com/aTeddy/p/3643095.html