Html 样式输入类型文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4909228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style input type file?
提问by Banshee
Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.
是否可以在不担心浏览器兼容性的情况下设置类型文件的输入元素的样式？在我的情况下，我需要实现背景图像和圆形边框（1px），如果可能，还应该自定义按钮。
回答by teshguru
Follow these steps then you can create custom styles for your file upload form:
请按照以下步骤为您的文件上传表单创建自定义样式：
1.) This is the simple HTML form(please read the HTML comments I have written here bellow)
1.) 这是一个简单的 HTML 表单（请阅读我在下面写的 HTML 注释）
<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>
2.) Then use this simple script to pass the click event to file input tag.
2.) 然后使用这个简单的脚本将点击事件传递给文件输入标签。
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of a styling without worrying how to change default styles. I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.
现在您可以使用任何类型的样式而无需担心如何更改默认样式。我很清楚这一点，因为我已经尝试更改默认样式一个半月了。相信我这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这是完整的 AUTOMATED UPLOAD 代码。
<html>
<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">
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();
}
</script>
<body>
<center>
<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>
</center>
</body>
</html>
回答by Iris
Same solution via Jquery. Works if you have more than one file input in the page.
通过 Jquery 的相同解决方案。如果页面中有多个文件输入，则有效。
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
回答by Jonas M?lgaard
After looking around on Google for a long time, trying out several solutions, both CSS, JavaScript and JQuery, i found that most of them were using an Image as the button. Some of them were hard to use, but i did manage to piece together something that ended out working out for me.
在 Google 上搜索了很长时间，尝试了几种解决方案，包括 CSS、JavaScript 和 JQuery，我发现他们中的大多数都使用图像作为按钮。其中一些很难使用，但我确实设法拼凑出一些最终对我有用的东西。
The important parts for me was:
对我来说重要的部分是：
- The Browse button had to be a Button (not an image).
- The button had to have a hover effect (to make it look nice).
- The Width of both the Text and the button had to be easy to adjust.
- The solution had to work in IE8, FF, Chrome and Safari.
- 浏览按钮必须是一个按钮（不是图像）。
- 该按钮必须具有悬停效果（以使其看起来不错）。
- 文本和按钮的宽度必须易于调整。
- 该解决方案必须适用于 IE8、FF、Chrome 和 Safari。
This is the solution i came up with. And hope it can be of use to others as well.
这是我想出的解决方案。并希望它对其他人也有用。
Change the width of .file_input_textbox to change the width of the textbox.
更改 .file_input_textbox 的宽度以更改文本框的宽度。
Change the width of both .file_input_div, .file_input_button and .file_input_button_hover to change the width of the button. You might need to tweak a bit on the positions also. I never figured out why...
更改 .file_input_div、.file_input_button 和 .file_input_button_hover 的宽度以更改按钮的宽度。您可能还需要对位置进行一些调整。我一直不明白为什么...
To test this solution, make a new html file and paste the content into it.
要测试此解决方案，请创建一个新的 html 文件并将内容粘贴到其中。
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
回答by Kerry Liu
Here's a simple css only solution, that creates a consistent target area, and lets you style your faux elements however you like.
这是一个简单的 css only 解决方案，它创建一个一致的目标区域，并让您可以随意设置人造元素的样式。
The basic idea is this:
基本思想是这样的：
- Have two "fake" elements (a text input/link) as siblings to your real file input. Absolutely position them so they're exactly on top of your target area.
- Wrap your file input with a div. Set overflow to hidden (so the file input doesn't spill out), and make it exactly the size that you want your target area to be.
- Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.
- 有两个“假”元素（文本输入/链接）作为真实文件输入的兄弟元素。绝对定位它们，使它们正好位于目标区域的顶部。
- 用 div 包裹你的文件输入。将溢出设置为隐藏（因此文件输入不会溢出），并使其与您希望目标区域的大小完全一致。
- 将文件输入的不透明度设置为 0，使其隐藏但仍可点击。给它一个大的字体大小，这样你就可以点击目标区域的所有部分。
Here's the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
这是 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>
回答by Paul Sweatte
Use the clip property along with opacity, z-index, absolute positioning, and some browser filters to place the file input over the desired button:
使用剪辑属性以及不透明度、z-index、绝对定位和一些浏览器过滤器将文件输入放在所需的按钮上：
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
回答by Hassaan
use uniform js pluginto style input of any type, select, textarea.
用于uniform js plugin设置任何类型的输入样式，选择，文本区域。
The URL is http://uniformjs.com/
