你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
样式化文件输入是出了名的困难，因为大多数浏览器不会改变CSS或javascript的外观。
即使输入的大小也不会对以下内容做出反应:
<input type="file" style="width:200px">
相反，你需要使用size属性:
<input type="file" size="60" />
对于任何比这更复杂的样式(例如改变浏览按钮的外观)，你将需要考虑在本机文件输入上覆盖一个有样式的按钮和输入框的狡猾方法。rm在www.quirksmode.org/dom/inputfile.html上提到的那篇文章是我见过的最好的一篇。
更新
虽然直接对<input>标记设置样式很困难，但在<label>标记的帮助下，这很容易实现。请看下面来自@JoshCrozier的回答:https://stackoverflow.com/a/25825731/10128619
用css隐藏它，并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值，这样用户就可以看到上传了什么。当表单提交时，间隔将清除[编辑]对不起，我一直很忙，是想更新这篇文章，这里是一个例子
<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;
});
});
这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。
基本的html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。
设置一些jquery，当你点击图像时，点击真正的输入。
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
现在你的按钮开始工作了。更改时只需剪切并粘贴值。
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。
按照以下步骤，你就可以为你的文件上传表单创建自定义样式了:
this is the simple HTML form(please read the HTML comments I have written here below) <form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></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> then use this simple script to pass the click event to file input tag. function getFile(){ document.getElementById("upfile").click(); } Now you can use any type of styling without worrying about how to change default styles.
我非常清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我，这是非常困难的，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这里是完整的自动上传代码。
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>
CSS在这里可以做很多事情…耍点小花招……
<div id='wrapper'>
<input type='file' id='browse'>
</div>
<style>
#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}
#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
</style>
::参考::http://site-o-matic.net/?viewpost=19
修道院
$ (' .new_Btn ') .click(函数(){ $ (' # html_btn ') .click (); })； .new_Btn { // CSS属性 ｝ # html_btn { 显示:没有; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div class = " new_Btn”> SelectPicture < / div > < br > <input id="html_btn" type='file' /><br> .
你也可以在没有jQuery的情况下使用正常的JavaScript实现你的目标。
现在newBtn与html_btn链接，你可以像你想要的那样样式你的新btn:D
<label>
<input type="file" />
</label>
您可以将input type="file"包装在输入的标签中。样式标签，无论你喜欢和隐藏输入display: none;
Jquery版本的teshguru脚本自动检测输入[文件]和样式
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
#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;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('input[type=file]').each(function()
{
$(this).attr('onchange',"sub(this)");
$('<div id="yourBtn" onclick="getFile()">click to upload a file</div>').insertBefore(this);
$(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>');
});
});
function getFile(){
$('input[type=file]').click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
}
</script>
</head>
<body>
<?php
var_dump($_FILES);
?>
<center>
<form action="" method="post" enctype="multipart/form-data" name="myForm">
<input id="upfile" name="file" type="file" value="upload"/>
<input type="submit" value='submit' >
</form>
</center>
</body>
</html>
我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。
This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.
测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。
下载:http://web.drolex.net/Drolex-FileStyle.zip。
这里有一个简单的css解决方案，它创建了一个一致的目标区域，并让你的伪造元素的风格，无论你喜欢。
基本思想是这样的:
有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们，让它们完全在你的目标区域上方。 用div包装你的文件输入。将overflow设置为hidden(这样文件输入就不会溢出来)，并使它恰好是你想要的目标区域的大小。 在文件输入上设置不透明度为0，这样它就被隐藏了，但仍然可以点击。给它一个大的字体大小，这样你就可以点击目标区域的所有部分。
下面是jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
<a href="#" id="browse">Browse </a>
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
我在这里找到了一个使用jQuery的非常聪明的解决方案，它可以在所有旧浏览器和新浏览器中工作。 它使用实际的文件浏览按钮来处理所有样式和click()问题。 我做了一个简单的javascript版本:小提琴 解决方案非常简单，就像天才一样:让文件输入不可见，然后用一段代码把它放在mousecursor下面。
<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
<script>
function file_ho(e, o, a) {
e = window.event || e;
var x = 0,
y = 0;
if (o.offsetParent) {
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (o = o.offsetParent);
}
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}
</script>
<style>
.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity=0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
</style>
当<input type="file">被创建时，所有渲染引擎都会自动生成一个按钮。从历史上看，这个按钮是完全不可样式的。然而，Trident和WebKit通过伪元素添加了钩子。
三叉戟
从IE10开始，文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上，应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:
:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >
Windows 8操作系统的IE10界面显示如下:
WebKit
WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样，几乎任何CSS规则都可以应用，因此Trident的例子也可以在这里工作:
:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; ｝ < input type = " file " >
在OS X操作系统下，Chrome 26界面显示如下:
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段，点击按钮，javascript调用隐藏字段，简单的解决方案与任何css或一堆jquery。
<button id="file" onclick="$('#file').click()">Upload File</button>
我发现了一个非常简单的方法来切换文件按钮到图片。 你只需要给图片贴上标签，然后把它放在文件按钮的顶部。
<html>
<div id="File button">
<div style="position:absolute;">
<!--This is your labeled image-->
<label for="fileButton"><img src="ImageURL"></label>
</div>
<div>
<input type="file" id="fileButton"/>
</div>
</div>
</html>
单击标记图像时，选择文件按钮。
更新没关系，这不能工作在IE或它的新兄弟，FF。可以正常工作在其他类型的元素上，但不能工作在文件输入上。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和boom，它在IE9+无缝工作。
警告:以下所有内容都是垃圾!
通过使用根据容器定位/调整大小的伪元素，我们可以只使用一个输入文件(不需要额外的标记)，并按通常的方式设置样式。
Demo
<input type="file" class="foo">
<style>
.foo {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
border-radius: 5px;
outline: 0;
}
.foo:hover:after {
background: #5978f8;
}
.foo:after {
transition: 200ms all ease;
border-bottom: 3px solid rgba(0,0,0,.2);
background: #3c5ff4;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: 'Upload Something';
line-height: 60px;
border-radius: 5px;
}
</style>
享受的家伙!
旧的更新
把这个变成了Stylus mixin。应该很容易让你们中的一个酷SCSS猫转换它。
file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)
用法:
<input type="file">
input[type="file"]
file-button(200px)
正如JGuo和CorySimmons提到的，您可以使用可样式标签的可点击行为，隐藏不太灵活的文件输入元素。
<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>
</body>
</html>
你不需要JavaScript !下面是一个跨浏览器的解决方案:
请看这个例子!-适用于Chrome/FF/IE - (IE10/9/8/7)
最好的方法是将一个带有for属性的自定义标签元素附加到隐藏的文件输入元素。(标签的for属性必须匹配文件元素的id，这样才能工作)。
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>
作为一种替代方法，你也可以直接用标签包装文件输入元素:
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>
在样式方面，只需使用属性选择器隐藏输入元素。
input[type="file"] {
display: none;
}
然后，您所需要做的就是设置自定义标签元素的样式。(例子)。
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 -值得注意的是，如果你使用display: none隐藏元素，它将在IE8及以下版本中不起作用。还要注意，jQuery验证默认情况下不验证隐藏字段。如果这两种情况对您来说是一个问题，这里有两种不同的方法来隐藏输入(1,2)，在这种情况下可以工作。
下面是一个解决方案，它还显示了所选的文件名: http://jsfiddle.net/raft9pg0/1/
HTML:
<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>
JS:
$(function() {
$("input:file[id=file-upload]").change(function() {
$("#file-upload-value").html( $(this).val() );
});
});
CSS:
input[type="file"] {
display: none;
}
.custom-file-upload {
background: #ddd;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px; }
这里有一个交叉兼容的方法，可以在Chrome, Firefox, Safari和IE中工作。
$(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div> <input type="submit" name="submit" value="Submit" id="submit"> </form>
最好的方法是使用伪元素:after或:before作为显化de input的元素。然后按照您的意愿设置该伪元素的样式。我建议你为所有输入文件做一个通用的样式，如下所示:
input {
height: 0px;
outline: none;
}
input[type="file"]:before {
content: "Browse";
background: #fff;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #e0e0e0;
top: -1px;
line-height: 35px;
color: #b6b6b6;
padding-left: 5px;
display: block;
}
这里有一个解决方案，它没有真正对<input type="file" />元素进行样式化，而是在其他元素之上使用<input type="file" />元素(可以进行样式化)。<input type="file" />元素实际上是不可见的，因此，整体的错觉是一个漂亮的样式文件上传控件。
我最近遇到了这个问题，尽管Stack Overflow上有太多的答案，但似乎没有一个真正符合要求。最后，我对它进行了定制，以获得一个简单而优雅的解决方案。
我还在Firefox、IE(11、10和9)、Chrome和Opera、iPad和一些android设备上进行了测试。
这里是JSFiddle链接-> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } }); body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="" method="post" enctype="multipart/form-data"> <div class="upload"> <input type="button" class="uploadButton" value="Browse" /> <input type="file" name="upload" accept="image/*" id="fileUpload" /> <span class="fileName">Select file..</span> </div> <input type="button" class="uploadButton" value="Upload File" /> </form>
希望这能有所帮助!!
这周我还需要自定义按钮，并在旁边显示所选的文件名，所以在阅读了上面的一些答案后(谢谢BTW)，我想出了以下实现:
HTML:
<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>
CSS
input[type='file'] {
color: #a1bbd5;
display: none;
}
.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}
label{
color: #a1bbd5;
border-radius: 3px;
}
Javascript(角)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});
基本上我正在使用ng-file-upload lib, angular方面，我将文件名绑定到我的$作用域，并给它的初始值为'No file selected '，我还将onFileSelect()函数绑定到我的作用域，因此当一个文件被选中时，我使用ng-upload API获取文件名并将其分配给$scope.filename。
如果你正在使用Bootstrap 3，这对我来说是有效的:
参见https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <span class="btn btn-primary btn-file"> Browse...<input type="file"> </span>
它会产生以下文件输入按钮:
认真的，去https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/看看吧
如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答:
如何显示文件名的文本:
最简单的方法是将这两个元素设置到一个位置:相对，给标签一个更高的z-index，并给输入文件负边距，直到标签文本在你想要的位置。不要在输入时使用display:none !
例子:
input[type="file"] {
position:relative;
z-index:1;
margin-left:-90px;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
position:relative;
z-index:2;
background:white;
}
我发现这种方法最简单、最轻便。
下面是工作示例:http://codepen.io/c3zar22/pen/QNoYXN
以下是解释:
this would be the markup: <label for="attach-project-file"> <span id="remove-project-file" class="close">x</span> <div class="filename" id="attached-project-file">Click to select a file</div> </label> <input id="attach-project-file" type="file"> hide the input in a hacky way like this: #attach-project-file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } style the corresponding label instead [for="attach-project-file"] { /* your styles here */ } style "remove file" button .close { font-size: 16px; padding: 10px; position: absolute; top: 0; right: 0; cursor: pointer; font-style: normal; } .filename element will be used to display the selected file below is the commented JS code needed (using jQuery) to make it work: var $attach = $('#attach-project-file'), $remove = $('#remove-project-file'), $name = $('#attached-project-file'); // initially hide the remove button $remove.hide(); // do this when file input has changed // i.e.: a file has been selected $attach.on('change', function() { var val = $(this).val(); if (val !== '') { // if value different than empty // show the file name as text // hide/text/fadeIn creates a nice effect when changing the text $name .hide() .text(val) .fadeIn(); // show the remove button $remove.fadeIn(); } else { // if value empty, means the file has been removed // show the default text $name .hide() .text('Click to select a file') .fadeIn(); // hide remove button $remove.fadeOut(); } }); // remove selected file when clicking the remove button // prevent click bubbling to the parent label and triggering file selection $remove.on('click', function(e) { e.preventDefault(); e.stopPropagation(); $attach .val('') .change(); // trigger change event });
只有CSS
使用这个非常简单和容易
.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; ｝ <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">
可见性:隐藏的技巧
我通常会使用可见性:隐藏技巧
这是我设计的按钮
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
这是input type=file按钮。注意可见性:隐藏规则
<input type="file" id="upload" style="visibility:hidden;">
这是JavaScript将它们粘合在一起。它的工作原理
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签
这些答案很好，它们都适用于非常具体的用例。也就是说，他们固执己见。
所以，这里有一个答案，它没有任何假设，但无论你如何修改它都是有效的。你可以用css改变设计，添加javascript，可能会显示一个文件名的变化，等等，它仍然会一直工作。
代码:
这里是核心css
.file-input{
pointer-events: none;
position: relative;
overflow: hidden;
}
.file-input > * {
pointer-events: none;
}
.file-input > input[type="file"]{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: all;
cursor: pointer;
height: 100%;
width: 100%;
}
和核心html:
<div class="file-input">
<input type="file"/>
</div>
如您所见，我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的，并且总是占用容器的宽度/高度。因此，您可以根据自己的需要进行定制。样式包装成一个按钮，使用一些js显示文件名选择，等等，没有什么会打破，只要上述核心代码保持不变。
正如你将在演示中看到的，我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。
演示：JSFIDDLE
可能会有很多牛角。但我喜欢在纯CSS中使用fa-buttons:
.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } <div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
小提琴:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
本地拖放支持的工作示例:https://jsfiddle.net/j40xvkb3/
当样式化文件输入时，您不应该破坏任何本机交互 输入提供。
display: none方法破坏了本地拖放支持。
为了不破坏任何东西，你应该对输入使用不透明度:0的方法，并在包装器中使用相对/绝对模式来定位它。
使用这种技术，你可以很容易地为用户设置点击/拖放区域的样式，并在dragenter事件上添加javascript自定义类来更新样式，并给用户一个反馈，让他看到他可以拖放文件。
HTML:
<label for="test">
<div>Click or drop something here</div>
<input type="file" id="test">
</label>
CSS:
input[type="file"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
}
div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
border: 3px dotted #bebebe;
border-radius: 10px;
}
label {
display: inline-block;
position: relative;
height: 100px;
width: 400px;
}
下面是一个工作示例(带有额外的JS来处理拖拽事件和删除的文件)。
https://jsfiddle.net/j40xvkb3/
希望这对你有所帮助!
把上传文件按钮放在你漂亮的按钮或元素上并隐藏它。
非常简单，可以在任何浏览器上工作
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>
风格
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}
不要被“伟大的”css解决方案所欺骗，这些解决方案实际上非常特定于浏览器，或者将样式化按钮覆盖在真正的按钮之上，或者强迫您使用<label>而不是<button>，或任何其他类似的hack。JavaScript是必要的，以使其工作为一般用途。如果你不相信我，请学习gmail和DropZone是怎么做的。
只要按你想要的样式设计一个普通的按钮，然后调用一个简单的JS函数来创建并链接一个隐藏的输入元素到你的样式按钮。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
注意上面的代码是如何在用户每次选择一个文件后重新链接它的。这很重要，因为只有当用户更改文件名时才会调用"onchange"。但您可能希望在用户每次提供该文件时获取该文件。
这是一个很好的方法来做材料/角文件上传。 你可以用bootstrap按钮做同样的事情。
注意，我使用了<a>而不是<button>，这允许点击事件冒泡。
<label>
<input type="file" (change)="setFile($event)" style="display:none" />
<a mat-raised-button color="primary">
<mat-icon>file_upload</mat-icon>
Upload Document
</a>
</label>
这里我们使用span来触发类型文件的输入，并且我们简单地定制了span，所以我们可以使用这种方式添加任何样式。
注意，我们使用带有可见性:hidden选项的input标记，并在span中触发它。
.attachFileSpan { 颜色:# 2 b6dad; 光标:指针; ｝ .attachFileSpan:{徘徊 文字修饰:下划线; ｝ <h3>自定义输入文件类型</h3> <input id="myInput" type="file" style="visibility:hidden"/> <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()" > 附加文件 < / span >
参考
当点击有样式的<div>时，只需使用trigger()函数模拟点击<input>。我在<div>中创建了自己的按钮，然后在点击我的<div>时触发了输入上的单击。这允许你创建你想要的按钮，因为它是一个<div>，模拟点击你的文件<input>。然后在<input>上使用display: none。
// div styled as my load file button
<div id="simClick">Load from backup</div>
<input type="file" id="readFile" />
// Click function for input
$("#readFile").click(function() {
readFile();
});
// Simulate click on the input when clicking div
$("#simClick").click(function() {
$("#readFile").trigger("click");
});
我发现最好的方法是有一个输入类型:文件，然后将其设置为display: none。给它一个id。创建一个按钮或任何您想要打开文件输入的其他元素。
然后在它(按钮)上添加一个事件侦听器，当单击它时，它会模拟对原始文件输入的单击。 比如点击一个名为hello的按钮，但它会打开一个文件窗口。
示例代码
//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn">
<i class="paper plane icon"></i>
</button>
<input type="file" id="file" class="input-file" />
javascript
var attachButton=document.querySelector('.attach-button');
attachButton.addEventListener('click', e=>{
$('#file').trigger("click")
})
转换文件名的多个文件解决方案
自举例子
HTML:
<div>
<label class="btn btn-primary search-file-btn">
<input name="file1" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
<div>
<label class="btn btn-primary search-file-btn">
<input name="file2" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
1. jQuery JS:
$().ready(function($){
$('.search-file-btn').children("input").bind('change', function() {
var fileName = '';
fileName = $(this).val().split("\\").slice(-1)[0];
$(this).parent().next("span").html(fileName);
})
});
2. JS没有jQuery
Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
item.addEventListener("change", function() {
var fileName = '';
fileName = this.value.split("\\").slice(-1)[0];
this.parentNode.nextElementSibling.innerHTML = fileName;
});
});
这种方法为您提供了完全的灵活性!ES6 / VanillaJS!
html:
<input type="file" style="display:none;"></input>
<button>Upload file</button>
javascript:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('input[type="file"]').click();
});
这隐藏了输入文件按钮，但实际上是从另一个普通按钮点击它，显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;，输入按钮在DOM中不保留任何可见空间。
(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)
这是一个纯CSS，无javascript，无bootstrap, 100%跨浏览器的解决方案!只需剪切粘贴一个样式块，然后测试您的文件上传控制。
这个解决方案不像其他文章那样试图隐藏然后重新创建原始HTML元素。它使用纯CSS，没有任何马戏团技巧或第三方工具，为所有主要浏览器设置原始文件上传表单控件的样式。你甚至不需要改变你的HTML代码!只需剪切并粘贴下面的代码到你的网页来测试它…
<style>
/* Note: This CSS will style all instances of
<input type=file /> controls in your website. */
input[type="file"],
input[type="file"]:visited,
input[type="file"]:hover,
input[type="file"]:focus,
input[type="file"]:active {
margin:0;
padding: 0em 0em;/* fallback: older browsers like IE 1-8 need "em" */
padding: 0rem 0rem;/* older browsers dont know what "rem" is */
overflow: hidden; /* long file names overflow so just hide the end */
background: #fff;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:hover {
background: #f9f9ff; /* Optional rollover color: I am using a light blue to indicate an interaction */
border: 2px solid #999;
}
input[type="file"]:visited,
input[type="file"]:focus,
input[type="file"]:active {
background: #fff; /* Default back to white when focused. */
border: 2px solid #999;
}
/* Note: These "disabled" selectors blow up in IE so have to be separated from the same styles above. */
input[type="file"]:disabled {
margin: 0;
padding: 0em 0em;
padding: 0rem 0rem;
overflow: hidden; /* long file names overflow so just hide the end */
background: #ddd;
border-radius: .2em;
border-radius: .2rem;
outline: none;
border: 2px solid #bbb;
cursor: pointer;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="file"]:disabled:hover {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
input[type="file"]:disabled:visited,
input[type="file"]:disabled:focus,
input[type="file"]:disabled:active {
background: #ddd; /* disabled-readonly buttons should be grey */
border: 2px solid #999;
}
/* IE UPLOAD BUTTON STYLE: This attempts to alter the file upload button style in IE. Keep in mind IE gives you limited design control but at least you can customize its upload button.*/
::-ms-browse { /* IE */
display: inline-block;
margin: 0;
padding: .2em .5em;
padding: .2rem .5rem;
text-align: center;
outline: none;
border: none;
background: #fff;
white-space: nowrap;
cursor: pointer;
}
/* FIREFOX UPLOAD BUTTON STYLE */
::file-selector-button {/* firefox */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .18em .5em;
padding: .18rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
/* CHROME AND EDGE UPLOAD BUTTON STYLE */
::-webkit-file-upload-button { /* chrome and edge */
display: inline-block;
margin: 0rem 1rem 0rem 0rem;
padding: .19em .5em;
padding: .19rem .5rem;
-webkit-appearance: button;
text-align: center;
border-radius: .1rem 0rem 0rem .1rem;
outline: none;
border: none;
border-right: 2px solid #bbb;
background: #eee;
white-space: nowrap;
cursor: pointer;
}
</style>
<input type="file" id="fileupload" name="fileupload"
value="" tabindex="0" enctype="multipart/form-data"
accept="image/*" autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Multiple File Upload"
aria-label="Multiple File Upload" />
<br /><br />
<input disabled="disabled" type="file" id="fileupload"
name="fileupload" value="" tabindex="0"
enctype="multipart/form-data" accept="image/*"
autocomplete="off" multiple="multiple"
aria-multiselectable="true" title="Disabled Multiple File Upload"
aria-label="Disabled Multiple File Upload" />
这是文件上传控件在Firefox、Chrome和Edge中使用下面的CSS的样子。这是一个非常简单干净的设计。你可以把它变成你喜欢的样子:
Internet Explorer为您提供了有限的设计控制，但至少您可以使用CSS操作控件来更改一些东西，包括圆形边框和颜色:
我的解决方案的优点是:
You stick with simple CSS to style the original HTML input control You can see one or more file names in the file input textbox Screen readers and ARIA-friendly devices can interact normally with your file upload control You can set tabindex on your HTML element so its part of the tab order Because you are using plain HTML and CSS, your file input button works perfectly in old and new browsers ZERO JavaScript required! Runs and loads lighting fast in even the oldest of browsers Because your are not using "display:none" to hide the control, its file block stream data is never disabled from reaching the server in any old or new browser version known
你不需要愚蠢的JavaScript技巧，Bootstrap，或尝试隐藏/重新创建你的文件输入控件。这只会破坏所有在线用户的可用性。样式化原始HTML控件意味着你的文件上传控件在25年的新老浏览器中都能很好地工作。
This is why you cannot trust all these scripted hacks here that erase, rewrite, or destroy HTML just to try and recreate some visual experience. That shows that you do not understand how HTML is used or why its been around for 30 years practically unchanged. You should never try and rewrite HTML's native form control functionality. Why? There is more to using natural HTML in websites than just manipulation of markup for some forced visual experience. The trade-offs of limited visual design in these replaced HTML elements was designed that way for a reason.
我的建议是:坚持使用简单的HTML和CSS解决方案，作为web开发人员，你将没有任何问题。
一个图像上传应用程序的演示，适用于大多数后端良好的动画功能。
// common function render_element(styles, el) { for (const [kk, vv] of Object.entries(styles)) { el.style[kk] = vv; } } function hoverOpacity(el) { el.addEventListener('mouseenter', function() { el.style.opacity = 0.75 }.bind(el)); el.addEventListener('mouseleave', function() { el.style.opacity = 1 }.bind(el)); } // return void event handler on setTimeout function buffer(func, time){ return e=>{ if(func.still)return; // first runtime if(!func.pft){ func(e); func.pft = true; func.still = false; return; } func.still = true; setTimeout(e=>{ func(e); func.still = false; }, time); } } // end of common const imageUploadButton = document.getElementById('image-upload-button'); imageUploadButton.addEventListener('click', e=>{ // pulse animation total time const d1 = document.getElementById('image-form'); let time = 600; if(d1.rendered){ d1.ready(); }else{ d1.ready = function(){ d1.style.display = 'flex'; d1.style.background = '#c5edd0'; this.d2.style.background = '#b4dbbf'; this.d3.style.background = '#95dea9'; this.d4.innerHTML = 'Drag and Drop or Click Above to Upload'; } let dismiss_btn = document.createElement('div'); render_element({ position: 'absolute', height: '30px', width: '30px', top: '0', right: '0', background: '#fff', borderRadius: '30px', cursor: 'pointer', margin: '2px', zIndex: '10', }, dismiss_btn); dismiss_btn.addEventListener('mouseenter', function(){this.style.background = '#fc4f30'}); dismiss_btn.addEventListener('mouseleave', function(){this.style.background = '#fff'}); dismiss_btn.addEventListener('click', ()=>{d1.style.display = 'none'}); d1.appendChild(dismiss_btn); const d3 = d1.querySelector('#image-input'); const d5 = d1.querySelector('#image-submit'); d5.style.visibility = 'hidden'; d1.parentNode.removeChild(d1); document.body.appendChild(d1); d1.removeChild(d3); let [ d2, d4, ] = Array.from({length: 3}, ()=>document.createElement('div')); let width = window.innerWidth; let d_styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', }; render_element({ position: 'fixed', left: ((width - 430) / 2).toString() + 'px', width: '430px', top: '60px', height: '280px', zIndex: '10', }, d1); render_element(d_styles, d1); render_element({ width: '90%', height: '90%', }, d2); render_element(d_styles, d2); render_element({ width: '80%', height: '70%', fontSize: '0', cursor: 'pointer', }, d3); hoverOpacity(d3); render_element(d_styles, d3); d1.appendChild(d2); d2.appendChild(d3); let tt = time / 3; let ht = tt / 2; d1.addEventListener('dragover', buffer(e=>{ d1.style.background = '#ebf9f0'; setTimeout(()=>{ d1.style.background = '#95dea9'; }, ht); setTimeout(()=>{ d2.style.background = '#b6e3c2'; setTimeout(()=>{ d2.style.background = '#c4eed2'; }, ht); }, tt); setTimeout(()=>{ d3.style.background = '#cae3d1'; setTimeout(()=>{ d3.style.background = '#9ce2b4'; }, ht); }, tt); }, time)); d2.style.flexDirection = 'column'; render_element({ fontSize: '16px', textAlign: 'center', fontFamily: 'Verdana', }, d4); d2.appendChild(d4); d3.addEventListener('change', e=>{ // backend // d5.click(); // if backend succeed, run frontend setTimeout(()=>{ d1.style.background = '#dbcea2'; setTimeout(()=>{ d2.style.background = '#dbc169'; setTimeout(()=>{ d3.style.background = '#ebc034'; }, ht); }, tt); }, time); // display backend path here // now only display filename d4.innerHTML = d3.files[0].name; }); d1.d2 = d2; d1.d3 = d3; d1.d4 = d4; d1.ready(); d1.rendered = true; } }); #image-upload-button{ width: 200px; height: 40px; background: lightgrey; display: flex; align-items: center; justify-content: center; cursor: pointer; } #image-form{ display: none; } ::-webkit-file-upload-button { visibility: hidden; } <div id="image-upload-button">Upload Image <form id="image-form" action="post"> <input id="image-input" type="file" /> <button id="image-submit" type="submit"></button> </form> </div>
你可以创建一个很棒的(未完成的)文件上传器到<button>元素或任何其他元素:
函数selectFile() { . getelementbyid (fileSelector) .click (); ｝ 输入# fileSelector (type = "文件"){ 显示:没有; ｝ 按钮onclick * =”()”){ 光标:指针; ｝ <input type="file" id="fileSelector"> <按钮onclick = " selectFile ()>选择文件从计算机
:: file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
这是一个新的选择器，可用于设置文件选择器按钮的样式。
它在最新的浏览器版本上得到了全面支持。
输入(type =文件)::file-selector-button { 边框:2px实体#6c5ce7; 填充:.2em .4em; border - radius: .2em; background - color: # a29bfe; 过渡:1; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # 81 ecec; 边框:2px实体#00cec9; ｝ < >形式 <label for="fileUpload">上传文件</label> <input type="file" id="fileUpload"> > < /形式
下面是另一个演示不同样式的代码片段:
.input_container { 边框:1px solid #e5e5e5; ｝ 输入(type =文件)::file-selector-button { background - color: # fff; 颜色:# 000; 边界:0 px; 右边框:1px solid #e5e5e5; 填充:10px 15px; margin-right: 20 px; 过渡:0; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # eee; 边界:0 px; 右边框:1px solid #e5e5e5; ｝ < >形式 < div class = " input_container”> <input type="file" id="fileUpload"> < / div > > < /形式
我觉得这个答案是必要的，因为这里的大多数答案都过时了。
