Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >input file 美化

input file 美化

作者头像

用户2038589

发布于 2018-09-06 07:37:00

发布于 2018-09-06 07:37:00

1.5K00

代码可运行

举报

文章被收录于专栏：青青天空树青青天空树

运行总次数：0

代码可运行

<input type='file'>的默认外观实在难看，绝大多数情况都需要对其美化。找了很多资料，目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来，然后给这个label增加我们想要的样式。

2.给input增加样式：

style="left:-9999px;position:absolute;"

3.label内增加显示文本

<span>上传文件</span>

完整代码：(点击查看demo)

<label class="upload_btn" for="file">
    <input type="file" id="file" name="" style="left:-9999px;position:absolute;">
    <span>上传文件</span>
</label>

这是label标签特性，可将事件传递到目标标签，如不加for属性，默认传递到第一个标签。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

type="file"按钮美化及获取路径原

1、自定义按钮并把<input type="file">定位在按钮的上面，并设置透明度为0，如下代码

tianyawhl

2019/04/04

3.1K2

表单多文件上传样式美化 && 支持选中文件后删除相关项

本文根据一个例子，对多文件的上传样式做了一些简单的美化（其实也没怎么美化。。），同时支持选择文件后自定义删除相关的文件，最后再上传

书童小二

2018/09/03

4.2K0

表单多文件上传样式美化 && 支持选中文件后删除相关项

WebUploader 一个页面多次实例化封装

上传图片网上找了比较好的插件WebUploader，但是在一个页面中2次实例化会有问题，现把插件封装了下，例子直接copy可以使用。如果上传失败再次需要上传的话，需要把失败的文件删除点，再重新加进来

tianyawhl

2019/04/04

2.3K0

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

ajax thinkphp jquery

jqgrid上要显示图片和上传图片的列,格式如下: {label:'图片',name:'icon',index:'icon',autowidth:true,formatter:alarmFormatter,editable:true,edittype:'custom', editoptions:{custom_element: ImgUpload, custom_value:GetImgValue}}, 注意:edittype要为custom 也就是自定义编辑格式. editoptions:{custom_

zcqshine

2018/05/11

2.4K0

input file上传文件改变默认样式

file input 表格博客

我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。

王小婷

2019/11/27

2.3K0

分享16个常用的自定义表单组件样式代码片段（下）

css html 编程算法

大家好，上一篇文章《分享16个常用的自定义表单组件样式代码片段（上）》给大家分享过 16个常用样式代码片段上半部分，今天分享剩余的 8 个自定义组件样式（注：本篇文章只给出样式部分，有些交互需要借助 JS 实现）。本文尽量用最简单的CSS布局编写，希望对你有所启发，也许你有其他的写法，期待你在评论区的分享。

前端达人

2022/04/18

8350

分享16个常用的自定义表单组件样式代码片段（下）

input[type=file]去掉“未选择任何文件”及样式改进

input 标签的 file 属性，在没有选择文件的情况下，默认显示一条文字“未选择任何文件”。

德顺

2019/11/13

11.3K0

HTML5 File API 使用技巧

api css php html5

在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。

多云转晴

2019/10/22

2.6K0

分享 16 个常用的自定义表单组件样式代码片段（上）

大家好，今天给大家分享 16个常用的自定义表单组件样式代码片段上半部分，本文尽量用最简单的CSS布局编写，对你有所启发，也许你有其他的写法，期待你在评论区的分享。

前端达人

2022/03/25

2K0

分享 16 个常用的自定义表单组件样式代码片段（上）

FF下修改美化文件域(input type=file)的样式

该文介绍了如何修改美化文件域（input type=file）在FF下的样式。首先，定义了样式，让文件域看起来更美观。然后，在<form>标签中添加一个input type=file，并设置其class为file。最后，在<style>标签内定义了input的样式。

练小习

2017/12/29

1.2K0

正常文档流模式下，后面的dom元素覆盖前面的，如果将前面的元素设置了relative将提升它自身的层级

超然

2018/08/03

2.9K0

input file样式设置

java https 网络安全 html

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160952.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/16

2.1K0

鲜花静态HTML网页作业作品大学生鲜花网页设计制作成品简单DIV CSS布局网站

javascript html css jquery java

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者

IT司马青衫

2022/08/24

1.5K0

鲜花静态HTML网页作业作品大学生鲜花网页设计制作成品简单DIV CSS布局网站

不同浏览器input file样式不一样

css 渲染 file input 浏览器

2、判断浏览器类型，如果是非IE，则将页面上的input 设置为近乎透明，然后将图片放在上面。

一笠风雨任生平

2019/08/02

5720

CSS实现自适应分隔线的N种方法

https://github.com/XboxYan/notes/issues/12

ConardLi

2020/02/20

2.3K0

CSS实现自适应分隔线的N种方法

iframe跨域应用 - 使用iframe提交表单数据

之前我们提到了iframe跨域，今天我们在原有的基础之上进行“实例”的讲解。通过iframe跨域实现表单数据的提交。如果想了解iframe跨域，可以发送“iframe跨域”到“HTML5学堂”公众号。为何提交数据还要跨域？在使用iframe跨域之前，可能你的脑海中就出现了这样一个问题：为何提交表单数据还需要跨域呢？首先我们要知道，网站的数据是存放在服务器上的，而当一个网站很大型，拥有很多的数据时，通常会进行分类，然后将不同类的内容放置在不同的子域名中。表单数据的提交模式今天会使用到MD5的知识，因

HTML5学堂

2018/03/12

5.6K0

图片裁切上传插件cropper的使用

图片上传格式一般是文件格式和base64格式，比较方便的是图片格式，后台可以方便的处理上传的图片。

tianyawhl

2019/11/04

2.2K0

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题块元素的居中问题块级元素左右居中:先设置自身width;然后,margin: 0 auto; 2.内联元素(行内)[不支持width, height, margin上下,padding上下] 常用内联元素 span(无语义) 超链接标签 a src可

zhaoolee

2018/04/19

1.4K0

<干货>5分钟快速回顾HTML CSS

42个来自《 CSS世界》中的实用技巧

但是要注意，当p的内容为英文单词组成的时候，如果单词过长，而不是“ pppppppppppppppppppppppppppppp”这样的一次，会被视为一个单位而造成超过div的尺寸。

winty

2021/01/05

1.1K0

美化你的RSS订阅地址

text var 插件 rem rss

最近一直被毕业设计缠着，连站点的文章都有点久没更新了，实在是忙得飞起。不过好在眼看着总算快收尾了，心里也轻松不少，就开始手痒想折腾点新东西。

柳神

2025/04/19

1200

相关推荐

type="file"按钮美化及获取路径原

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验