程序博客网 > 中国户外刀代工知乎

如何修改input type="file"样式

来源：互联网发布：中国户外刀代工知乎编辑：程序博客网时间：2024/06/04 17:54

每个浏览器对上传文件 type="file"都有不同的显示效果，如何设置上传文件按钮让其显示效果一致呢？

这个其实很简单，只需要使用css样式即可。

1.创建一个<div>,然后在这个<div>里面创建 type="file"，同时这个div里面输入要显示的文本

代码：

<div class="file-box">
<input type="file" class="file-btn"/>
上传文件
</div>

2.设置css样式

代码：

<style>
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文件上传按钮修改样式</title><style>.file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;}.file-btn{position: absolute;width: 100%;height: 100%;top: 0;    left: 0;    outline: none;    background-color: transparent;    filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}</style></head><body><div class="file-box"><input type="file" class="file-btn"/>上传文件</div></body></html>

阅读全文

0 0

中国户外刀代工知乎

中国户外刀代工知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子三眼天珠价格陨石价格多少钱一克乾隆大钱价格北京古玩城铜钱价格古铜钱价格古代铜钱价格表清朝铜钱图片及价格清朝铜钱价格表铜钱回收价格表民国瓷碗价格乾隆通宝铜钱价格北宋铜钱价格嘉庆通宝铜钱价格宋朝铜钱图片及价格乾隆铜钱多少钱康熙通宝铜钱价格表崇宁重宝铜钱值多少钱元朝铜钱宋代铜钱价格表康熙通宝铜钱值多少钱铜钱拍卖网古银古锁西塘古镇古镇黄龙溪古镇周庄古镇磁器口古镇黄姚古镇同里古镇青木川古镇柳江古镇青岩古镇沙湾古镇甪直古镇朱家角古镇洛带古镇德明古镇荡口古镇惠山古镇