input file中修改默认样式的简单方法

巧用Label与InputFile

最新推荐文章于 2023-08-01 13:13:34 发布

原创最新推荐文章于 2023-08-01 13:13:34 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #javascript

本文介绍了一种简单的方法来美化HTML中的文件上传按钮，仅使用Label标签的for属性即可实现，无需复杂的CSS和JS代码，使inputfile的外观更加友好。

看过网上很多修改input file 文件上传的例子，真的非常麻烦，不仅css写一大堆，还要写一些js代码，或者是引入bootstrasp的样式。

其实只要用到html中label标签的for属性就可以达到修改input file的功能。
代码如下：

<label for="file_load" style="display:block;background: #1CB541;color:white;width: 100px;height: 35px;line-height: 35px;font-size: 14px;text-align: center;">更换头像</label>
<input id="file_load" type="file" style="display:none">

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云，

关注关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

更改input（file）样式

07-27

更改input（file）样式

input file选择文件之后自动上传（样式自定义美化）

09-01

自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！

参与评论您还未登录，请先登录后发表或查看评论

2 条评论

Aurora_Mi 2022.05.25
牛逼，大爱你[face]emoji:072.png[/face]

许失之 2021.11.10
有效的做法

HTML中文件上传时使用的input type=”file”元素的样式自定义

12-14

Web页面中，在需要上传文件时基本都会用到<input type="file">元素，它的默认样式： chrome下： IE下：不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。根据用户的需求，设计风格，改变其显示样式的场合就比较多了。如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。搭建上传按钮所需的基本元素复制代码代码如下: 上传 <input type=”file”> 效果（chrome）：现在看到的分两行显示。外围之所以没有换成div，是因为在IE7-浏览器中，只要不是设成inli

修改input file默认样式

weixin_34314962的博客

08-31

228

2019独角兽企业重金招聘Python工程师标准>>> ...

【转】input(file)浏览按钮美化

conkeyn的专栏

12-11

764

转自：http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html 首先我们先要了解一下各浏览器的浏览按钮的共同特性： 1、都可以设置整体的宽度和高度，但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度； 2、谷歌中只要是input的区域单击可弹出窗口；IE（IE6中没试）中，单击浏...

html中，文件上传时使用的<input type="file">的样式自定义

weixin_34408717的博客

06-28

1132

css input[type=file] 样式美化(input上传文件样式 )

09-24

`input[type=file]` 是HTML中用于创建文件上传功能的元素，但默认情况下，它的样式比较朴素，不符合现代网页的美观要求。本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站...

修改file按钮的默认样式实现代码

11-30

代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd... <... <head> <title>添加附件<... [removed][removed] [removed] function f

关于type="file"的input框样式修改小结

09-28

在前端开发中，`<input type="file">` 是一种常用的HTML元素，用于让用户选择本地文件进行...在实际项目中，合理地运用这些工具和技术，可以有效解决 `input[type="file"]` 样式统一的问题，提高前端开发的效率和质量。

input元素[type="file"]时的样式定制及浏览器兼容性问题探讨

09-28

input元素[type=file]时的样式定制一直以来都是浏览器兼容方面的一个问题，下面针对不同浏览器下对input[type=file]的样式定制进行探讨，感兴趣的朋友可以参考下哈

修改input的file的默认样式

qq_40910788的博客

12-08

812

修改input的file的默认样式 .abiano{ padding: 4px 10px; height: 20px; line-height: 20px; position: relative; border: 1px solid #999; text-decoration: none; ...

如何修改input[type="file"]的默认样式

热门推荐

Dear_Mr的博客

02-20

5万+

1.首先我们先来看一下input[type=”file”]默认的样子 <input type="file" />2.改变input[type=”file”]默认的样子这里我设置了 opacity: 0;使得 input变得不可见了.change{ opacity: 0; }<input class="change" type="file" multiple="multiple" />

如何修改input file的默认样式

qq_37728271的博客

12-14

2163

浏览器默认的input type=file 样式非常丑陋，相信大部分朋友有想过如何修改其样式。我的思路是将input隐藏，然后使用js代码控制其点击事件。第一步：写好html结构和css结构 <div class="container"> <div class="content"> <div class="content-inne...

修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题

笑到世界都狼狈的博客

04-21

2140

**今天来和大家分享一下input type="file"的默认样式修改相关问题** 首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的，而且很丑，相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题： 1.隐藏input，用label代替input标签显示在页面上，代码如下： <style type="te...

修改文件选择框input type=file的样式

winney07的博客

07-12

5726

文件选择框(input type=“file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。

前端必知：35.修改input默认效果

qq_52799985的博客

08-01

8612

二.修改方法。

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

祈澈菇凉

11-24

1282

我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。这个时候，就需要用到一些障眼法了，将原来的样式隐藏起来，再重新写一个按钮代替，与原来的位置重合即可。原本的样式是这样的： <!DOCTYPE html> &l...

上传文件控制input type="file"样式修改记

junjun222222的专栏

05-25

1562

前几天改几个页面样式，大部分都改完了，就剩上传文件控件没有美化，就想放过去算了，就这样吧，后来还是觉得实在看不下去，还是动了点小脑筋把它改造完了，开心开心 ... 现记录一下改造过程：最先就是就这个个控件写样式，几次三番都失败了。哼，那就不要怪我了，只能来个狠的，一不做二不休，直接把这个不听话的家伙给隐藏了，原位置给放了一个按钮，再在按钮后面放了一个span ，用来显视选择的文件，好，