你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
不要被“伟大的”css解决方案所欺骗,这些解决方案实际上非常特定于浏览器,或者将样式化按钮覆盖在真正的按钮之上,或者强迫您使用<label>而不是<button>,或任何其他类似的hack。JavaScript是必要的,以使其工作为一般用途。如果你不相信我,请学习gmail和DropZone是怎么做的。
只要按你想要的样式设计一个普通的按钮,然后调用一个简单的JS函数来创建并链接一个隐藏的输入元素到你的样式按钮。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
注意上面的代码是如何在用户每次选择一个文件后重新链接它的。这很重要,因为只有当用户更改文件名时才会调用"onchange"。但您可能希望在用户每次提供该文件时获取该文件。
其他回答
用css隐藏它,并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值,这样用户就可以看到上传了什么。当表单提交时,间隔将清除[编辑]对不起,我一直很忙,是想更新这篇文章,这里是一个例子
<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button -->
<input type="submit" class="button" value="Change"/>
</div>
$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});
我发现了一个非常简单的方法来切换文件按钮到图片。 你只需要给图片贴上标签,然后把它放在文件按钮的顶部。
<html>
<div id="File button">
<div style="position:absolute;">
<!--This is your labeled image-->
<label for="fileButton"><img src="ImageURL"></label>
</div>
<div>
<input type="file" id="fileButton"/>
</div>
</div>
</html>
单击标记图像时,选择文件按钮。
最好的方法是使用伪元素:after或:before作为显化de input的元素。然后按照您的意愿设置该伪元素的样式。我建议你为所有输入文件做一个通用的样式,如下所示:
input {
height: 0px;
outline: none;
}
input[type="file"]:before {
content: "Browse";
background: #fff;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #e0e0e0;
top: -1px;
line-height: 35px;
color: #b6b6b6;
padding-left: 5px;
display: block;
}
你不需要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;
}
然后,您所需要做的就是设置自定义标签元素的样式。(例子)。
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
1 -值得注意的是,如果你使用display: none隐藏元素,它将在IE8及以下版本中不起作用。还要注意,jQuery验证默认情况下不验证隐藏字段。如果这两种情况对您来说是一个问题,这里有两种不同的方法来隐藏输入(1,2),在这种情况下可以工作。
只有CSS
使用这个非常简单和容易
.choose: -webkit-file-upload-button { 颜色:白色; 显示:inline-block; 背景:# 1 cb6e0; 边界:没有; 填充:7px 15px; 粗细:700; border - radius: 3 px; 空白:nowrap;} 光标:指针; 字体大小:10 pt; } <label>附加你的屏幕短片</label> <input type="file" multiple class=" select ">