样式输入类型文件？ [复制]答案

【问题标题】：Style input type file? [duplicate]样式输入类型文件？ [复制]
【发布时间】：2011-06-22 00:11:11
【问题描述】：

是否可以在不担心浏览器兼容性的情况下设置文件类型的输入元素的样式？在我的情况下，我需要实现背景图像和圆形边框（1px），如果可能的话，还应该自定义按钮。

【问题讨论】：

【解决方案1】：

按照以下步骤，您可以为文件上传表单创建自定义样式：

1.) 这是简单的 HTML 表单（请阅读我在下面写的 HTML cmets）

    <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.) 然后使用这个简单的脚本将点击事件传递给文件输入标签。

    function getFile(){
        document.getElementById("upfile").click();
    }

现在您可以使用任何类型的样式，而不必担心如何更改默认样式。我很清楚这一点，因为我一个半月以来一直在尝试更改默认样式。相信我这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建您的自定义文件上传表单。这是完整的自动上传代码。

<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>

【讨论】：

不错的解决方案。在输入上使用 'display:none' 而不是 'height: 0px;宽度：0px；溢出：隐藏；'也将其从 DOM/您的布局中删除。

【解决方案2】：

通过 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();
});

【讨论】：

你能为此发一个小提琴吗？

【解决方案3】：

在谷歌上浏览了很长时间，尝试了几种解决方案，包括 CSS、JavaScript 和 JQuery，我发现他们中的大多数都使用图像作为按钮。其中一些很难使用，但我确实设法拼凑出一些最终对我有用的东西。

对我来说重要的部分是：

“浏览”按钮必须是按钮（不是图像）。
按钮必须具有悬停效果（使其看起来更漂亮）。
文本和按钮的宽度必须易于调整。
该解决方案必须在 IE8、FF、Chrome 和 Safari 中运行。

这是我想出的解决方案。并希望它也可以对其他人有用。

改变.file_input_textbox的宽度来改变文本框的宽度。

更改 .file_input_div、.file_input_button 和 .file_input_button_hover 的宽度以更改按钮的宽度。您可能还需要对位置进行一些调整。我一直不明白为什么......

要测试此解决方案，请创建一个新的 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>

【讨论】：

一个小提琴：jsfiddle.net/gd4wuvga

【解决方案4】：

这是一个简单的纯 CSS 解决方案，它可以创建一致的目标区域，并让您可以根据自己的喜好设置人造元素的样式。

基本思路是这样的：

有两个“假”元素（一个文本输入/链接）作为真实文件输入的同级元素。绝对定位它们，使它们恰好位于目标区域的顶部。
用 div 包装您的文件输入。将溢出设置为隐藏（这样文件输入不会溢出），并使其与您希望目标区域的大小完全一致。
在文件输入中将不透明度设置为 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>

【讨论】：

【解决方案5】：

使用 clip 属性以及不透明度、z-index、绝对定位和一些浏览器过滤器将文件输入放置在所需的按钮上：

http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping

【讨论】：

【解决方案6】：

使用uniform js plugin 设置任何类型的输入、选择、文本区域。

网址是 http://uniformjs.com/

【讨论】：