Question

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

Answer 1

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

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

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

现在，您可以使用任何类型的样式，而无需担心如何更改默认样式。我非常了解这一点，因为我一直试图改变一个半月的默认样式。相信我这很难，因为不同的浏览器有不同的上传输入标签。所以使用这个来构建自定义文件上传表单。这是完整的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>

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

Answer 3

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

对我来说重要的部分是：

“浏览”按钮必须是按钮（不是图像）。
该按钮必须具有悬停效果（使其看起来不错）。
文本和按钮的宽度必须易于调整。
解决方案必须在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>

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

Answer 5

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

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

Answer 6

使用uniform js plugin来设置任何类型的输入，选择，textarea。

网址是 http://uniformjs.com/

样式输入类型文件？

6 个答案: