文件上传按钮的样式

最新推荐文章于 2024-09-03 17:39:26 发布
最新推荐文章于 2024-09-03 17:39:26 发布
阅读量1.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
关注
专栏目录
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
Web页面中，在需要上传文件时基本都会用到<input type="file">元素，它的默认样式： chrome下： IE下： 不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。 根据用户的需求，设计风格，改变其显示样式的场合就比较多了。 如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。 搭建上传按钮所需的基本元素 复制代码代码如下: 上传 <input type=”file”> 效果（chrome）： 现在看到的分两行显示。 外围之所以没有换成div，是因为在IE7-浏览器中，只要不是设成inli
自定义文件上传按钮样式
xm2by的博客
06-14 2266
自定义文件上传按钮样式 &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
自定义样式上传文件(vue)
fy1879047121的博客
09-03 304
自定义样式上传文件(vue3)
实现好看的文件选择按钮
C/C#、Android driver、STM32、Linux等等。
12-29 951
网页设计中默认的文件路径输入框，即file控件，由于其外观太朴素，也无法很难改变其属性特征，想隐藏路径名称也不行。但是我们可以通过巧妙的方法改成自己想要的样子。 - 如果没有直接改变的好方法，我们可以尝试扬长避短的来绕过其外观短处，只使用我们需要的功能 部分。 - 这里我将用自定义的按键来替换其外观，而file控件，我将其隐藏掉。它虽然被隐藏了，但是其功能仍在。 - 开始动手。
前端css+js实现自定义上传文件/图片按钮，并显示已选文件/图片名称
AI小美好
07-23 5507
默认的文件上传按钮样式（如下图）确实不太好看，想展现得美观一些就自己写一个样式吧。 下面我们做一个自定义的上传按钮效果，上传后把已上传文件/图片名称也显示出来。 实现思路也很简单： 1、先把原元素隐藏起来，自己写一个好看的按钮 2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果（等同于触发了原input元素 ） 最终效果如下图： 一、html部分代码： <div> ...
文件上传时按钮美化碰到的问题
时光记
12-31 1701
文件上传时按钮美化碰到的问题
input type=“file“ 文件上传类型输入框样式修改方法
qq_39111074的博客
04-28 1582
input type="file" 文件上传类型输入框样式修改方法
文件上传按钮样式
03-20
在本例中，我们关注的是“文件上传按钮样式”，特别是利用Bootstrap框架来实现这一功能，并且具备图片上传预览的效果。Bootstrap是一款流行的前端开发框架，它提供了丰富的UI组件，帮助开发者快速构建响应式、移动...
css自定义文件上传按钮样式
06-23
本文将深入探讨如何使用CSS来自定义文件上传按钮的样式。 首先，我们需要理解文件上传组件的基本结构。通常，HTML中的`<input type="file">`元素用于创建一个文件选择器，但其默认样式非常朴素，不符合现代网页设计...
修改文件上传按钮样式
04-26
type=file修改按钮样式
BootStrap文件上传样式超好看【持续更新】
09-02
在本文中，我们将深入探讨如何使用Bootstrap框架来创建美观的文件上传组件。Bootstrap是一个流行的前端开发框架，提供了丰富的样式和组件，使得网站设计更加简洁、响应式和一致。在文件上传方面，Bootstrap提供了...
文件上传表单样式
02-19
例如，可以改变输入框的外观，添加自定义的按钮样式，或者隐藏默认的文件选择器，用自定义的图标或文字代替。以下是一个简单的例子： ```css input[type="file"] { display: none; } label { background-color: #...
fastDFS+LibreOffice多文件上传(二)前端部分：修改上传按钮样式和上传后在页面显示
FromNowOnUntilTheEnd
11-17 543
  一：修改上传按钮样式 原来的&lt;input type="file"/&gt;太丑了，所以我自己设置了样式。方法：在&lt;input type="file"/&gt;上面加一层div，遮住它。 .upload{ padding: 0px 25px; line-height: 20px; position: relative; text-decoration:...
[css]自定义input文件上传按钮样式
weixin_53236070的博客
03-04 1665
使用css自定义input文件上传按钮样式
自定义上传文件(input type=file)按钮样式
hs1219462412的博客
05-17 1326
.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
php文件上传按钮美化,CSS美化input上传按钮并显示上传文件路径信息(兼
weixin_31429257的博客
03-26 334
网上也有很多类似的文章，但很多也只是美化一下按钮而已;默认的上传按钮在后面会显示上传文件名，若按照网上的教程美化后文件名信息就看不到了;体验较差。以下代码结合网上方案完善而来，并兼容IE等各大浏览器。美化前后对比图：CSS代码：.file{position:relative;display:inline-block;background:#D0EEFF;border:1pxsolid#99D3...
自定义input[type=file]上传按钮样式的四种方案，你知道几种？
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
02-08 5979
最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！color: red;
网页中 文件上传 input 标签 type=“file“ 设置 中间按钮 button的样式
刘宇(LY)个人笔记
02-16 1467
html 中 input标签 type=file 文件上传时 ,设置 input标签中的按钮的css 样式
vue表格中上传按钮样式
coinisi_li的博客
05-22 206
因为上传的图标被包含在el-upload中，而删除按钮并没有被包含在el-upload中。所以整体的样式对应上传有偏差。
文件上传按钮CSS样式设计
最新发布
10-02
文件上传按钮在CSS设计上通常需要结合HTML结构和一些基础样式来创建一个清晰、易于使用的交互元素。以下是一个基本的设计步骤和示例： 1. HTML 结构：首先，创建一个`<input type="file">`标签，这是用户选择文件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值