样式inputtypes文件？
是否可以设置types文件的input元素，而不必担心浏览器的兼容性？ 在我的情况下，我需要实现一个背景图像和圆形边框（1px），如果可能的话，button也应该自定义。
按照这些步骤，你可以为你的file upload表单创build自定义样式：
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.）然后使用这个简单的脚本将点击事件传递给文件input标签。
function getFile(){ document.getElementById("upfile").click(); }
现在，您可以使用任何types的样式，而无需担心如何更改默认样式。 我知道这一点很好，因为我一直在试图改变一个半月的默认样式。 相信我很难，因为不同的浏览器有不同的上传input标签。 所以使用这一个来build立你自定义的file uploadforms.Here是完整的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>
同样的解决scheme通过JQuery。 如果在页面中有多个文件input，则工作。
$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(); });
在Google上浏览了很长一段时间之后，尝试了几种解决scheme，包括CSS，JavaScript和JQuery，我发现其中大部分都是使用Image作为button。 其中一些很难使用，但我确实设法拼凑了一些最终为我工作的东西。
对我来说重要的部分是：
- 浏览button必须是一个button（不是图像）。
- 该button必须有一个hover效果（使其看起来不错）。
- 文本和button的宽度必须容易调整。
- 该解决scheme必须在IE8，FF，Chrome和Safari中工作。
这是我想出的解决scheme。 希望对其他人也有用。
更改.file_input_textbox的宽度以更改文本框的宽度。
更改.file_input_div，.file_input_button和.file_input_button_hover的宽度以更改button的宽度。 你可能还需要调整一下位置。 我从来没有想过为什么…
要testing此解决scheme，请创build一个新的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>
以下是一个简单的CSS解决scheme，它可以创build一个一致的目标区域，并允许您根据自己的喜好来devise人造元素。
基本的想法是这样的：
- 有两个“假”元素（文本input/链接）作为您的真实文件input的兄弟姐妹。 绝对放置它们，使它们完全位于目标区域之上。
- 用div封装你的文件input。 将溢出设置为隐藏（所以文件input不会溢出），并将其设置为您希望目标区域的大小。
- 在文件input中将不透明度设置为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>
使用剪辑属性以及不透明度，z-index，绝对定位和一些浏览器filter将文件input放置在所需的button上：
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
使用uniform js plugin来input任何types的input，select，textarea。
