改变 input file 样式的两种方法

最新推荐文章于 2023-11-17 16:06:30 发布
最新推荐文章于 2023-11-17 16:06:30 发布
阅读量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
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
起点小说解锁.js
04-27
起点小说解锁.js
input[type=file]去掉“未选择任何文件”及样式改进
热门推荐
不二的博客
08-19 5万+
input 标签的 file 属性，在没有选择文件的情况下，默认显示一条文字“未选择任何文件”。 在选择文件后，该条文字会变成路径和文件的名称。 如何去掉其默认的“未选择任何文件”提示呢？ 查阅资料，没有发现可以直接修改的办法，但是我们可以通过其他方法，实现自定义提示文字的效果。 我通过 label 标签绑定 input 标签，然后隐藏 input ，添加 button 和 spa...
＜input type=“file“/＞如何将样式变得更好看
qq_68695044的博客
09-09 1093
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。虽然功能没有任何问题，但是这个默认的样式总是让人觉得与页面格格不入。输入框<input type="file"/>的默认样式是这样的。<label> 标签为 input 元素定义标注（标记）。注意：label中的for属性应与input元素的id一致。按钮的样式就交给大家自己发挥啦，这里仅做一下参考。那么，我们有没有什么方法能优化一下它的样式呢？
input type='file' 样式修改大法好
ASIA_技术
08-15 1437
普通的做法，另外写一个按钮的样式，然后将自己写的按钮和这个默认的样式的定位改为重合，并将默认的按钮设置opacity:0，即设置透明度为完全透明，这样就可以在表面上是点击自己定义的样式，而实际上是点击input这个按钮。 可是让这两个东西完全重合，是很麻烦的一件事情么，下面进入最简单的方法：1、重写一个新的样式 可以是一个div 2、将原始的input标签默认样式设置display:none;...
input file修改样式
weixin_45375510的博客
04-22 5167
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样式
xyl36500的专栏
09-04 9001
<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 type=file的样式
winney07的博客
07-12 2783
文件选择框(input type=“file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。
更改input [type=file]的样式
Miketutu的博客
02-05 769
更改input [type=file]的样式
自定义修改input上传文件样式及文字
最新发布
dont_curry的博客
11-17 996
【代码】自定义修改input上传文件样式及文字。
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
根据用户的需求，设计风格，改变其显示样式的场合就比较多了。 如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。 搭建上传按钮所需的基本元素 复制代码代码如下: <span> 上传</span> <input type=...
两种php实现图片上传的方法
12-18
本篇我在这向大家介绍两种常规的上传方式。（注：在这里我们仅仅是对功能的实现，不去做过多的前端的样式） 一、利用form表单上传 此种方式是最原始的上传方式，前端就是简单的form表单，后端我们有PHP处理传输过来...
js自定义input文件上传样式
01-21
文件上传是我们经常会用到的功能，但是原生的input样式太丑了，能不能自定义一个input文件上传样式呢？ 我这里写了两种方法，form表单提交跟ajax异步提交都没有问题，自动上传或者点击上传按钮上传也都没问题 先看...
LayuiForm表单.txt
12-10
命名格式一般分为两种： 一：layui-模块名-状态或类型 二：layui-状态或类型 因为有些类并非是某个模块所特有，他们通常会是一些公共类。如： 一（定义按钮的原始风格）：class="layui-btnlayui-btn-primary" ...
jQuery完全实例.rar
06-16
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果...
js onclick用法：跳转到指定URL
在路上 — on the way
03-10 3万+
使用onclick跳转到其他页面/跳转到指定url ☆如果是本页显示可以直接用location,方法如下： ①onclick="javascript:window.location.href='http://www.huierlp.com'" ②onclick="location='http://www.huierlp.com'" ③onclick="window.location.h
JS实现简单loading功能页面
在路上 — on the way
03-02 6072
正在载入... 正在载入首页，请稍候....... <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:gray; background-color:white; padding:0px; border-style:none;
IE6下PNG图片透明解决办法
在路上 — on the way
03-01 533
IE6下PNG图片透明问题时常困扰着我们，一般的方法很多，大致有：   function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase()
兼容各浏览哭的js无缝滚动代码
在路上 — on the way
02-26 481
想必大家都注意到的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时
input type=file的样式怎么改
09-26
### 回答1： input type="file" 标签样式是无法改变的，因为它的样式是由操作系统的文件选择器控制的。但是你可以使用一些技巧来模拟一个自定义样式的文件选择器，比如使用 CSS 和 JavaScript 来隐藏原生的 input 元素，然后用一个自定义的按钮触发点击事件，再通过 JavaScript 来模拟文件选择器的操作。具体的实现方法可以参考一些开源的文件上传组件库。 ### 回答2： 要改变 input type=file 的样式，可以使用以下两种方法： 1. 使用样式丰富的外部库或框架：可以使用一些流行的CSS库或框架，如Bootstrap、Semantic UI等，它们提供了自定义文件输入按钮样式的选项。你可以使用它们提供的类或样式来覆盖默认的input type=file样式。具体的实现方法可以参考对应文档或示例。 2. 使用自定义样式和JavaScript：使用自定义样式和JavaScript可以更灵活地改变 input type=file 的样式，以下是一种常见的改变样式的方法： - 首先，隐藏默认的文件选择按钮：设置 input[type="file"] 的样式 display:none;，这样文件选择按钮将不会显示出来。 - 然后，在附近添加一个自定义的按钮或元素，例如一个按钮或一个带有图标的div。 - 当点击自定义按钮或元素时，通过 JavaScript 来触发 input type=file 的点击事件，使用户能够选择文件。可以使用下面的代码： （假设 input type=file 的 id 为 "fileInput"） ```javascript document.getElementById("customButton").addEventListener("click", function() { document.getElementById("fileInput").click(); }); ``` - 最后，使用 CSS 来美化自定义按钮或元素的样式，例如改变颜色、添加边框等等。 需要注意的是，虽然可以改变 input type=file 的外观样式，但出于安全考虑，浏览器仍然会强制要求用户使用默认的文件选择对话框来选择文件，而不是通过自定义样式的按钮来选择文件。 ### 回答3： 要改变<input type=file>的样式，可以使用以下方法： 1. 使用CSS样式：可以通过对<input type=file>应用CSS样式来自定义其外观。通过设置元素的宽度、高度、边框、背景色等属性，可以改变文件输入框的外观。同时，还可以通过设置文字颜色、字体大小等属性来改变文件输入框中的提示文本。 2. 使用插件或框架：有一些第三方插件或框架提供了更丰富的文件输入框样式定制选项。例如，可以使用jQuery插件如Fileinput等来改变文件输入框的外观。这些插件通常提供了自定义按钮样式、预览功能等扩展功能。 3. 隐藏原始的文件输入框，自定义一个替代的元素：可以使用CSS和JavaScript来隐藏原始的<input type=file>元素，并创建一个自定义的替代元素。例如，可以创建一个按钮或图标，并通过JavaScript与文件输入框进行交互。当用户点击自定义元素时，可以模拟触发文件输入框的点击事件，并实现文件选择功能。 需要注意的是，由于安全限制，无法直接改变<input type=file>元素的样式。然而，通过上述方法可以实现对文件输入框的样式定制或自定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值