设置输入文件“type=”按钮的样式
如何设置输入type="file"按钮的样式？
<input type="file" />
回答 45
Stack Overflow用户
发布于 2009-04-03 16:11:45
设计文件输入的样式是出了名的困难，因为大多数浏览器都不会改变CSS或javascript的外观。
即使是输入的大小也不会对以下内容做出响应：
<input type="file" style="width:200px">相反，您需要使用size属性：
<input type="file" size="60" />对于任何比这更复杂的样式(例如，更改浏览按钮的外观)，您将需要查看在本机文件输入上覆盖样式按钮和输入框的棘手方法。www.quirksmode.org/dom/inputfile.html的rm已经提到的那篇文章是我见过的最好的一篇。
更新
尽管直接设置<input>标记的样式很困难，但借助<label>标记很容易做到这一点。请看下面来自@JoshCrozier的答案：https://stackoverflow.com/a/25825731/10128619
Stack Overflow用户
发布于 2012-03-03 22:42:38
遵循以下步骤，然后您可以为您的文件上传表单创建自定义样式：
- 这是一个简单的超文本标记语言表单(请阅读我在下面写的超文本标记语言注释)
- ，然后使用这个简单的脚本将点击事件传递给文件输入标记。
函数getFile(){ document.getElementById("upfile").click()；}
现在，您可以使用任何类型的样式，而不必担心如何更改默认样式。
我非常了解这一点，因为我已经尝试更改默认样式一个半月了。相信我，这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这是全自动上传的代码。
function getFile() {
document.getElementById("upfile").click();
}
function sub(obj) {
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
document.myForm.submit();
event.preventDefault();
}#yourBtn {
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor: pointer;
}<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
Stack Overflow用户
发布于 2011-07-05 19:14:34
使用css隐藏它，并使用带有$(选择器).click()的自定义按钮来激活浏览按钮。然后设置一个间隔来检查文件输入类型的值。间隔可以为用户显示值，这样用户就可以看到上传的内容。该间隔将清除表单何时提交编辑对不起，我一直很忙的意思是要更新这篇文章，这里是一个例子
<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button -->
<input type="submit" class="button" value="Change"/>
</div>
$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});https://stackoverflow.com/questions/572768
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号