微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

制作一个漂亮的file文件上传控件样式的实例教程

零下一度
发布： 2017-05-11 15:33:06
原创
4397人浏览过

作为一名前端程序猿呢，在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。刚好菜鸟我最近工作中也遇到了这个问题。解决以后想着人生在于总结。于是乎就把这个简单的demo记录下来。

html代码

<form action=""method="post"enctype="multipart/form-data">
    <a href="#" class="a-upload"><input type="file" name="file" id="file">点击这里上传图片</a>

</form>
登录后复制

css代码

 .a-upload {
    padding: 4px 10px;
    width: 200px;
      height: 30px;
      box-sizing: border-box;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
   top: 5px;
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
     width: 200px;
      height: 30px;
      left: 0;
      top: 0;
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}
登录后复制

　　结果

给上传文件的input控件

【相关推荐】

沉浸式翻译
沉浸式翻译

沉浸式翻译：全网口碑炸裂的双语对照网页翻译插件

沉浸式翻译 83
查看详情 沉浸式翻译

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上就是制作一个漂亮的file文件上传控件样式的实例教程的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：html基础教程之代码初体验 下一篇：页内跳转（锚点练习）的实例代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何删除html节点_HTML DOM节点删除（removeChild）与内存释放方法 删除HTML节点的核心方法是removeChild，需通过父节点移除子节点，如parentNode.removeChild(childNode)。现代浏览器也支持更便捷的element.remove()方法，允许节点直接删除自身。节点被移除后虽脱离DOM树，但若JavaScript仍持有其引用（如事件监听器、数组或对象中的引用），则无法被垃圾回收，导致内存泄漏。因此，删除节点时必须手动移除事件监听器并清除所有JavaScript引用，确保节点彻底“不可达”，以便垃圾回收机制正常释放内存。常见操作
2025-11-12 17:57:02
262
HTML注释残留漏洞怎么检测_HTML注释残留漏洞利用浏览器查看源码检测技巧 最直接检测HTML注释残留漏洞的方法是通过浏览器查看网页源代码，手动搜索敏感信息如API密钥、内部IP、调试信息等，这些常被开发人员无意遗留的注释可能暴露系统结构、凭证或未上线功能，导致信息泄露、攻击面扩大甚至内网渗透；也可借助BurpSuite、OWASPZAP等扫描工具或自定义脚本自动化检测，结合关键词匹配提升效率，但最终仍需人工分析上下文以评估真实风险。
2025-11-12 17:52:02
989
vb如何打印html_VB程序调用HTML内容打印（WebBrowser）方法 利用WebBrowser控件在VB中打印HTML，需先加载内容并等待DocumentCompleted事件确保渲染完成，再调用Print或PrintPreview方法；通过CSS的@mediaprint规则可自定义打印样式，如隐藏元素、调整页边距和分页；除打印外，还可使用ExecWB实现保存为MHT/HTML、提取渲染后HTML内容，结合虚拟打印机导出PDF；常见问题包括打印空白页（异步加载未完成）、样式错乱（CSS兼容性或路径错误）、页眉页脚无法直接控制及JavaScript动态内容未执行，应
2025-11-12 17:50:02
856
如何处理HTML事件属性绑定的解决办法 答案是使用JavaScript事件监听或框架声明式绑定替代HTML内联事件。通过addEventListener实现行为与结构分离，支持多监听器且易于维护；避免onclick等内联写法以防逻辑混乱和难以测试；对动态元素采用事件委托提升性能，在父级统一处理子元素事件；在React、Vue中用onClick或@click由框架管理绑定，确保生命周期正确，整体提升代码可维护性与安全性。
2025-11-12 17:40:03
431
如何解决HTML锚点跳转不准的处理方法 锚点跳转不准主因是固定头部遮挡或滚动计算错误，可通过设置scroll-margin-top预留顶部间距，或用JavaScript手动调整滚动位置，亦可在目标元素前添加伪元素占位，推荐优先使用scroll-margin-top并注意头部真实高度。
2025-11-12 17:38:02
581
HTML表单数据截获漏洞怎么防护_传输过程中表单数据被截获防护方案 最根本的防护是部署HTTPS，通过SSL/TLS加密数据传输，防止窃听和篡改。同时需配置HSTS、安全Cookie、服务器端验证、CSP等措施，构建多层次防御体系，确保表单数据在传输中的机密性、完整性和来源可信。
2025-11-12 17:22:02
863
如何使用HTML构建博客文章布局的详细教程 答案：使用语义化HTML标签构建博客文章结构，包括article、header、time、figure、section和footer等，提升可读性与SEO。通过nav添加上下篇导航，优化alt属性与标题层级增强可访问性，并预留class便于CSS扩展，实现清晰、易维护的现代博客布局。
2025-11-12 17:04:02
695
新手怎么开始编辑网页HTML_新手如何快速上手编辑网页HTML 掌握HTML是创建和修改网页的第一步。首先搭建编辑环境，选用文本编辑器并保存为.html文件，用浏览器预览；接着学习基本结构，包括DOCTYPE声明、html、head与body标签；然后熟悉常用标签如h1-h6标题、p段落、a超链接和img图像；再利用浏览器开发者工具实时检查和修改元素；最后通过参考示例代码动手实践，复制、修改并刷新查看效果，逐步掌握网页编辑技能。
2025-11-12 16:47:02
580
html按钮如何用_HTML按钮（button/input）功能与事件使用方法 HTML按钮用于触发交互操作，主要使用和；前者语义明确、内容灵活，后者仅支持文本且灵活性低。可包含丰富内容并设置type属性控制表单行为，而通过value定义显示文本。两者均可通过onclick属性绑定JavaScript代码或函数实现点击响应，推荐将逻辑封装在外部函数中以保持结构清晰。更现代的方式是使用JavaScript的addEventListener方法动态绑定事件，便于管理多个监听器和解绑操作，需为元素设置id或class进行选择。常见应用场景包括表单提交、防重复点击（通过disabl
2025-11-12 16:37:53
795
re如何获取html_通过正则表达式(RegExp)提取HTML内容方法 可用正则提取HTML标签文本，如匹配内容中的内容；2.可提取标签属性值，如img的src；3.可提取超链接的URL和显示文本；4.但正则不适用于嵌套或格式错误的HTML，建议仅在简单场景使用，复杂结构应使用DOM解析器。
2025-11-12 16:15:03
219
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部