关于修改标签input file 样式问题！

最新推荐文章于 2021-09-02 16:03:16 发布

SevenBig

最新推荐文章于 2021-09-02 16:03:16 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css file样式

本文链接：https://blog.csdn.net/itSeven7/article/details/54582877

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

正常的input file 标签长不是很好看！所以一般会进行修饰！

git地址DEMO

修饰方法也就是用另一个好看标签来压住它！看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 110px;
			height: 34px;
			margin: 100px auto;
			position: relative;
		}
		.box a{
			display: block;
			width: 110px;
			height: 34px;
			position: absolute;
			left: 0;
			top: 0;
			background: green;
			text-decoration: none;
			color: #fff;
			border-radius: 5px;
			text-align: center;
			line-height: 34px;
		}
		.box input{
			opacity:0;
		}

	</style>
</head>
<body>
	<div class="box">
		<a href="javascript:;">获取文件</a>
		<input type="file" />
	</div>
	

</body>
</html>

但是！虽然这样实现了样式修改，还是有一点小瑕疵！那就是鼠标在a标签的不同位置会有两种样式箭头样式与手指样式！正常情况下使用css{cursor:pointer;}这个属性可以修改鼠标的样式！但是对于file标签来说是行不通的！

解决方法1：使用direction: rtl;这个属性可以指定内容书写方向！将input标签添加此属性，反转其内容，这样整个a标签都回变为手指形状，并且不影响file的功能！如果不要求兼容ie的话这个也可以了！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 110px;
			height: 34px;
			margin: 100px auto;
			position: relative;
			overflow: hidden;
		}
		.box a{
			display: block;
			width: 110px;
			height: 34px;
			position: absolute;
			left: 0;
			top: 0;
			background: green;
			text-decoration: none;
			color: #fff;
			border-radius: 5px;
			text-align: center;
			line-height: 34px;
		}
		.box input{
			width: 180px;
			height: 34px;
			opacity:0;
			direction: rtl;
			cursor:pointer;
		}

	</style>
</head>
<body>
	<div class="box">
		<a href="javascript:;">获取文件</a>
		<input type="file" />
	</div>
	

</body>
</html>

上边的方法测试了下在IE下文字会跑偏！所以还有一个用position来解决！代码如下，去掉反转input样式，利用定位拉长input距离使鼠标点击距离刚好点击文字的中部！这样就避免了iE下的怪异现象。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 110px;
			height: 34px;
			margin: 100px auto;
			position: relative;
			overflow: hidden;
		}
		.box a{
			display: block;
			width: 110px;
			height: 34px;
			position: absolute;
			left: 0;
			top: 0;
			background: green;
			text-decoration: none;
			color: #fff;
			border-radius: 5px;
			text-align: center;
			line-height: 34px;
		}
		.box input{
			width: 180px;
			height: 34px;
			opacity:0;
			position: absolute;
			left: -80px;
			top: 0;
			cursor:pointer;
			
		
		}

	</style>
</head>
<body>
	<div class="box">
		<a href="javascript:;">获取文件</a>
		<input type="file" />
	</div>
</body>
</html>

SevenBig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于修改标签input file 样式问题！

正常的input file 标签长不是很好看！所以一般会进行修饰！修饰方法也就是用另一个好看标签来压住它！看代码 Document *{ margin: 0; padding: 0; } .box{ width: 110px; height: 34px; margin: 100px auto; position: re
复制链接

扫一扫