原理
先用a标签做一个按钮，定好宽度， 然后将input放在a标签里面，通过定位，将input相对于a的左上角对齐， 最后将input的透明度设为0即可。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传按钮修改样式</title>
<style>
.file {
position: relative;
display: inline-block;
border: 1px solid rgba(154, 154, 154, 1);
border-radius: 4px;
width: 60px;
height: 28px;
color: #303133;
line-height: 28px;
text-align: center;
text-decoration: none;
text-indent: 0;
font-size: 14px;
}
.file input {
position: absolute;
width: 60px;
top: 0;
left: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
}
.file:hover {
background: linear-gradient(to right, #FFAD4A 0, #FF9362 50%);
background: -webkit-linear-gradient(to right, #FFAD4A 0, #FF9362 50%);
border-color: #FFAD4A;
color: #fff !important;
text-decoration: none;
}
</style>
</head>
<body>
<a href="javascript:;" class="file">选择文件<input type="file" ></a>
</body>
</html>
复制代码问题
绝对定位，要设置宽度
1873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
