文件上传按钮的样式

最新推荐文章于 2024-08-05 23:02:44 发布
最新推荐文章于 2024-08-05 23:02:44 发布
阅读量1k 收藏
点赞数
分类专栏： css专栏 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932733/article/details/115367817
版权
本文介绍了如何通过CSS来改造原声文件上传按钮的样式，使其更加美观。内容包括HTML结构和CSS代码示例，特别适合Vue项目的应用。此外，还提及了使用已封装的ElementUI上传组件作为替代方案。
摘要由CSDN通过智能技术生成

原声文件上传按钮样式比较简单不太好看，而且貌似不可修改，所以自己便使用CSS透明度的方法给它改造，代码如下

本次项目使用的是vue，所以{ {xlsName}}是自己通过Change方法获取e.target.files[0].name来赋值的

若是原生js可以通过var xlsName = document.getElementById("file").files[0].name来取得上传文件的名字

演示样式

最终样式

HTML
<div class="button">
 选择文件
  <input type="file" id="file" @change
最低0.47元/天 解锁文章
前端小白QAQ
关注
专栏目录
修改文件上传按钮样式
04-26
type=file修改按钮样式
上传文件的样式
weixin_30492601的博客
08-09 94
在网上找了很久上传文件的样式，并没有适合自己的，现在推荐一个样式给大家，可以看到自己是否选到文件和文件名。效果如下图所示： html 代码如下： <div class="uploading"> <span>上传文件：</span> <input class='view' id="viewfile" type="text...
【Material-UI】File Upload Button 组件详解
最新发布
lph159的博客
08-05 840
可以通过sx属性或自定义样式来定制按钮的外观，如改变颜色、大小、边距等。
自定义文件上传按钮样式
xm2by的博客
06-14 2260
自定义文件上传按钮样式 &amp;amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot;&amp;amp;amp;gt;的默认样式是这个样子的： Chrome浏览器： IE浏览器： 用一个字来概括，那就是“丑”。   虽然一直都觉得&amp;amp;amp;lt;input type=&amp;amp;quot;file&amp;amp;quot;&am
css自定义文件上传按钮样式
06-23
css自定义文件上传按钮样式
[css]自定义input文件上传按钮样式
weixin_53236070的博客
03-04 1623
使用css自定义input文件上传按钮样式
文件上传按钮样式
03-20
在本例中，我们关注的是“文件上传按钮样式”，特别是利用Bootstrap框架来实现这一功能，并且具备图片上传预览的效果。Bootstrap是一款流行的前端开发框架，它提供了丰富的UI组件，帮助开发者快速构建响应式、移动...
WebUploader照片上传，file文件图片上传样式美化，多上传按钮处理，支持IE9+
04-03
主要涉及的元素有`webuploader-element`类的按钮样式，以及`file-list`列表中的图片预览样式。例如，可以改变按钮的背景色、边框、圆角，以及图片预览的大小、边距等。同时，可以使用JavaScript动态更新样式，如根据...
自定义上传文件(input type=file)按钮样式
hs1219462412的博客
05-17 1310
.file { width: 130px; position: relative; display: inline-block; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 2px 0 rgb(0 0 0 / 2%); border-radius: 3px; padding: 4px 12px; overflow: hidden; color: rgba(0, 0, 0, 0.85); te
文件上传美化样式HTML代码
09-04
一个漂亮的文件上传样式的HTML源码，代替原来丑陋的文件上传按钮和长条文本框
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
Web页面中，在需要上传文件时基本都会用到<input type="file">元素，它的默认样式： chrome下： IE下： 不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。 根据用户的需求，设计风格，改变其显示样式的场合就比较多了。 如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。 搭建上传按钮所需的基本元素 复制代码代码如下: 上传 <input type=”file”> 效果（chrome）： 现在看到的分两行显示。 外围之所以没有换成div，是因为在IE7-浏览器中，只要不是设成inli
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
上传控件改变样式
09-24
上传控件input file 样式美化
elementUI 的上传组件＜el-upload＞，自定义上传按钮样式
坐等夕阳落time的博客
08-14 4893
方法1：调用组件的方法唤起选择文件事件效果；方法2：把图片显示分离出来，做选择图片使用，单独做一个显示图片的区域
将自定义文件上传按钮的样式
春夏秋冬
07-18 3500
将自定义文件上传按钮的样式
[html]自定义文件上传按钮
热门推荐
Benson的专栏
04-01 1万+
如果觉得文件上传按钮太难看，如果觉得上传按钮在各个浏览器上显示的效果不一致。我们可以自定义文件上传按钮。 实现方案是将文件上传按钮的点击事件传递给其他按钮。 .html -> 文件上传 .css -> #myFile {     visibility: hidden;    /* 隐藏 */ } #myBtn {     /* 在这里自定义你的
自定义input[type=file]上传按钮样式的四种方案，你知道几种？
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
02-08 5944
最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！color: red;
AngularJS文件上传控件详解与样式优化
文章着重强调了上传按钮的样式改进，原始的`<input type="file">`标签样式并不理想。作者建议使用一个`<a>`标签包裹`<input>`，将`<input>`的`opacity`设置为0，同时配合CSS美化，如隐藏默认的文件名显示区域，提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值