自定义文件上传按钮样式（input file 美化）
2020-03-17 本文已影响0人
叫子非鱼啊
自定义文件上传按钮样式
在写上传文件时,<input type="file">的样式是下面这样的
一般都不是自己想要的风格，下面来自己制定想要的样式
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
.fileinput-button {
position: relative;
display: inline-block;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
right: 0;
top: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<span class="btn btn-success fileinput-button">
<span class="glyphicon glyphicon-plus"></span>
<span>选择上传文件</span>
<input type="file">
</span>
</form>
</body>
</html>
关键的三个地方
opacity: 0; /*设置元素的不透明级别*/
.fileinput-button{ position: relative;}
.fileinput-button input{position: absolute;opacity: 0;}
————————————————
版权声明：本文为CSDN博主「程小秋」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/golden_wheat/article/details/77932296
