h5学习笔记：input file 样式小测试

最新推荐文章于 2024-07-12 09:12:08 发布

hero82748274

最新推荐文章于 2024-07-12 09:12:08 发布

阅读量527

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/88677226

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

翻看了一些资料查看了input file的样式，默认的 input file 样式并不好看。一般情况下需要调整样式，美化一番。查看了相关的资料发现采用了设置透明度为0的方式达到样式美化的效果，这不失为一种方法。下面做一下实验来了解一下这个过程。

1.对比观察

首先做这个实验先做一个对比观察。第一个不用a标签包着。第二个采用一个a标签进行包着。

<input class="ui-file" type="file" />

  <a href="javascript:void(0)" class="ui-upload">
			  <input class="ui-upload-file" type="file" />
			   选择文件 
</a>

第一步，将input 字体放大100px；为了观察其大小。第二种方式采用相对和绝对布局。

.ui-file{
	border: 1px solid red;
    font-size: 100px;	
}

	.ui-upload{
			
		   background: #007DDB;
		   display: inline-block;
		   padding: 10px 10px;
		   overflow: hidden;
		   border-radius: 4px;
		   position: relative;
		   color: white;
		   line-height: 40px;
		   width: 120px;
		   text-align: center;
		   height: 40px;
		   text-decoration: none;
		   cursor: pointer;
		}
		
		.ui-upload-file {
			opacity: 0.5;  /*调整0.5 查看效果*/
			font-size: 100px;
			position: absolute;
			cursor: pointer;
			left: 0;
			top: 0;
		}

将透明度改成0.5 就可以发现一些技巧。整个实验有一个比较关键的点。就是对透明度运用和设置字体大小。设置了透明度后，间接只是对a标签进行了样式处理。

在这里插入图片描述

总的代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Input File 实验</title>
	</head>
	<style>
		.ui-file{
		   border: 1px solid red;
		   font-size: 100px;	
		}
		
		.ui-container{
			margin-top: 130px;
		}
		
		.ui-upload{
			
		   background: #007DDB;
		   display: inline-block;
		   padding: 10px 10px;
		   overflow: hidden;
		   border-radius: 4px;
		   position: relative;
		   color: white;
		   line-height: 40px;
		   width: 120px;
		   text-align: center;
		   height: 40px;
		   text-decoration: none;
		   cursor: pointer;
		}
		
		.ui-upload-file {
			opacity: 0.5;  /*调整0.5 查看效果*/
			font-size: 100px;
			position: absolute;
			cursor: pointer;
			left: 0;
			top: 0;
		}
		
	</style>
	
	<body>
		
		<div>
			<input class="ui-file" type="file" />
		</div>
		<div class="ui-container">
		    <a href="javascript:void(0)" class="ui-upload">
			  <input class="ui-upload-file" type="file" />
			   选择文件 
			</a>
		</div>
	</body>
</html>

2.设置opacity: 0透明度

将样式调整为透明度为0的时候，input 就会被隐藏起来，这看起来可以达到美化input file的样式的目的。这里只是使用透明度一个小小技巧。不得不佩服css 使用过程中演绎出各种使用技巧。实际上只是对a标签做样式处理而已。

		.ui-upload-file {
			opacity: 0; 
			font-size: 100px;
			position: absolute;
			cursor: pointer;
			left: 0;
			top: 0;
		}

在这里插入图片描述

好了，实验到此结束。

hero82748274

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录