改变 input file 样式的两种方法

最新推荐文章于 2024-09-25 16:53:00 发布
最新推荐文章于 2024-09-25 16:53:00 发布
阅读量5.4w 收藏 7
点赞数 2
分类专栏： HTML CSS JavaScript 文章标签： input file 文件域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miner_lee/article/details/8450075
版权

改变 input file 样式（input  文件域）是很多前端朋友经常遇到的头疼问题，今天推荐两种改变 input file 样式的两种常用方法：


方法一：

<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">  

<input type="button" value="浏览" οnclick="path.click()" style="border:1px solid #ccc;background:#fff">  
<input type="file" id="path" style="display:none" οnchange="upfile.value=this.value">


也可以写成这样：


<style type="text/css">
<!--
#input1{border:1px solid #0000FF}
#btn1{width:70px;height:21px;font-size:12px;padding-top:3px; background:url(83.gif) no-repeat; height:22px; border:0;}
//-->
</style>


<body><input type="text" id="input1">
<input name="button" type="button" id="btn1" οnclick="myfile.click();" value="浏览文档" />
<input type="file" id="myfile" οnchange="input1.value=this.value" style="display:none">
</body>


方法二：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="我们,we@126.com" />
<meta name="copyright" content="版权所有" />


<title>css+js定义input的file浏览按钮样式兼容FireFox</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}


.text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}
.file{ width:67px;overflow:hidden; background:url(83.gif); height:22px; *vertical-align:3px; overflow:hidden; float:left;}
#file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}
-->
</style>
</head>
<body>
<input type="text" class="text" id="text"/>
<span class="file"><input id="file" type="file" /></span>
<script type="text/javascript">
<!--
var file = document.getElementById("file");
var text = document.getElementById("text");
file.onchange = type;
function type()
{text.value = file.value;}
-->
</script>
</body>
</html>
miner_lee
关注
专栏目录
自定义input[type=file]上传按钮样式的四种方案，你知道几种？
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
02-08 6005
最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！color: red;
html上传图片的原理,html自定义文件上传控件样式input:file方法总结
weixin_33677704的博客
05-31 1853
大家可能都知道在html中的input file文件上传控制默认风格与样式很难看了，下面我找到了几种比较实用的自定义文件上传框样式的方法，大家一起来看看。例1 一千个浏览器就有一千个默认控件样式如何自定义文件上传控件 样式？原理：把浏览器提供的默认控件样式隐藏，给控件外框添加自定义样式。兼容性：兼容所有浏览器。HTML: 代码如下 复制代码浏览…CSS:.input-file{displa...
更改input（file）样式
07-27
更改input（file）样式
HTML DOM INPUT FILE 大文件上传解决方案
最新发布
weixin_52041354的博客
09-25 816
前端：vue2,vue3,vue-cli,html5,webuploader后端：asp.net,jsp,springboot,php,数据库：MySQL,Oracle,SQL Server,达梦,人大金仓,国产数据库功能：超大文件上传,文件和文件夹批量上传，断点续传，加密上传，视频上传技术：百度webuploader，分块，切片，断点续传，秒传，MD5验证，纯JS实现，支持第三方软件集成要求：免费,开源,永久技术支持。
input file样式
xyl36500的专栏
09-04 9054
<br />方法一：<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">  <br /><input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">  <br /><input type="file" id="path" style="display
input file修改样式
weixin_45375510的博客
04-22 5417
input file的样式比较丑，直接进行修改时，无法修改其中按钮的样式。 只需简单的三步就可以搞定： 第一步： 将input file进行隐藏： #file { display: none; } 第二步： 添加button按钮： <input id="file" type="file"/><br /> <input type="button" value="上传文件" class="btn"/> 第三步： 点击按钮时，调用input file的点击函数： &lt
修改 input file 样式
jiahengzhang的专栏
08-04 1200
普通的 input file 样式，会根据浏览器的不同而显示不同的效果，IE显示的是，左边一个文本框，youbi
修改Input File的样式
爱，促进自我完善！
09-09 458
1.首先通过一个按钮触发file的click事件！ 2.File的click事件，选择一个文件确认之后触发本身的onchange事件，给input text文本框赋值。 JAVAScript： [code="java"] //浏览文件 function fileBrowse(){ //触发浏览事件 document.forms["fileForm"].upload.click...
css input[type=file] 样式美化(input上传文件样式 )
09-24
本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化，使文件上传按钮更加符合网站的整体风格。 首先，我们来看一个简单的例子。在这个例子中，我们创建了两个不同的样式来展示如何自定义文件上传按钮： ...
自定义上传控件input file的样式
03-19
要自定义`input file`样式，通常有两种方法： 1. **隐藏原生控件，使用CSS和JavaScript模拟**：将`input[type="file"]`设置为透明或者绝对定位使其脱离文档流，然后创建一个更美观的触发器（如一个`<button>`或`...
input file上传文件样式支持html5的浏览器解决方案
09-28
本文将深入探讨两个关键问题及其解决方案，这些问题分别是：在Firefox下无法通过CSS改变File上传控件的width，以及在不同浏览器中File上传控件的外观和行为不一致。 首先，让我们关注第一个问题：在Firefox下，File...
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
修改文件选择框input type=file的样式
winney07的博客
07-12 4579
文件选择框(input type=“file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。
html中，文件上传时使用的<input type="file">的样式自定义
weixin_34408717的博客
06-28 1085
Web页面中，在需要上传文件时基本都会用到&lt;input type="file"&gt;元素，它的默认样式： chrome下：   IE下：   不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。 根据用户的需求，设计风格，改变其显示样式的场合就比较多了。 如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。   搭建上传按钮所需的基本元素 ...
css input[type=file] 样式美化，input上传按钮美化
做个好的手艺人
09-14 552
&lt;a href="javascript:;" class="a-upload"&gt; &lt;input type="file" name="" id=""&gt;点击这里上传文件 &lt;/a&gt; &lt;a href="javascript:;" class="file"&am
input:file样式怎样修改
http://xueshuai.top
10-02 7777
问题描述： 我需要点击input:file来修改img中的图片，但是input:file样式太丑 解决办法： 给file设置透明度为0，让用户看不见他 创建新的button按钮 修改button按钮样式 点击button的时候使file也被点击 具体代码如下： <!-- HTML --> <img src=""> <input type="fi...
Input File样式定义
jantochen的专栏
06-15 203
定义input type="file" 的样式 body{ font-size:14px;} input{ vertical-align:middle; margin:0; padding:0} .file-box{ position:relative;width:340px} .txt{ height:22px; border:1px solid #cdcdcd; w...
input file样式，文件路径、文件名的获取
weixin_33929309的博客
01-19 322
http://blog.csdn.net/comikey/article/details/8954479 解决思路是把input放在文字的上边，弄成透明的，这样在点文字时，实际是点击了input，这样就实现了文件的上传。是不是很简单呀。 具体代码： <style> #uploadImg{font-size:12px;overflow:hidden;...
input type=file的样式怎么改
09-26
要改变 input type=file 的样式，可以使用以下两种方法： 1. 使用样式丰富的外部库或框架：可以使用一些流行的CSS库或框架，如Bootstrap、Semantic UI等，它们提供了自定义文件输入按钮样式的选项。你可以使用它们...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值