修改input file控件默认浏览文字

最新推荐文章于 2023-12-26 16:34:18 发布

转载最新推荐文章于 2023-12-26 16:34:18 发布 · 1.1w 阅读

收录于

html

当前文章被收录于：

html

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种通过CSS样式和HTML结构调整来改变浏览器默认的文件上传按钮显示文本的方法。适用于希望自定义文件选择控件外观的前端开发者。

<!DOCTYPE html>
<title>修改input file控件默认浏览文字</title>
<style>
div.file{display:inline-block;width:100px;height:20px;line-height:20px;position:relative;overflow:hidden;color:red}
div.file input{position:absolute;left:0px;top:0px;zoom:1;filter:alpha(opacity=0);opacity:0;font-size:20px;margin-left:-240px}
</style>
<!--[if lte IE 7]><style>div.file{display:inline}</style><![endif]-->
<div class="file">上传图片<input type="file" name="myfiles"/></div>

标签

#修改input file控件默认浏览文字