造型输入类型=“文件”按钮
如何设置输入type="file"按钮的样式。
样式文件输入是非常困难的，因为大多数浏览器不会改变来自css或javascript的外观。
即使输入的大小也不会对以下内容作出响应：
<input type="file" style="width:200px">
相反，您需要使用size属性：
<input type="file" size="60" />
对于任何比这更复杂的样式（例如，改变浏览按钮的外观），您需要看看在本机文件输入之上叠加样式化按钮和输入框的技巧方法。 rm在www.quirksmode.org/dom/inputfile.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;
}
然后，你需要做的就是定制自定义label元素。 （例子） 。
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 - 值得注意的是，如果您使用display: none隐藏该元素，它将无法在IE8及更低版本中使用。 另外请注意jQuery验证默认情况下不验证隐藏字段的事实。 如果任这些东西都是你的一个问题，这里有两种不同的方法来隐藏在这些情况下输入（1，2）工作。
请按照以下步骤操作，然后您可以为文件上传表单创建自定义样式：
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.）然后使用这个简单的脚本将点击事件传递给文件输入标签。
function getFile(){
document.getElementById("upfile").click();
}
现在您可以使用任何类型的样式，而无需担心如何更改默认样式。 我非常了解这一点，因为我一直在尝试将默认样式更改为一个半月。 相信我这很难，因为不同的浏览器有不同的上传输入标签。 所以使用这个来建立你自定义的文件上传窗体。这里是完整的AUTOMATED UPLOAD代码。
<html>
<head>
<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>
</head>
<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>
请享用！
祝你今天愉快，
链接地址: http://www.djcxy.com/p/23021.html