你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
不要被“伟大的”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"。但您可能希望在用户每次提供该文件时获取该文件。
其他回答
更新没关系,这不能工作在IE或它的新兄弟,FF。可以正常工作在其他类型的元素上,但不能工作在文件输入上。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和boom,它在IE9+无缝工作。
警告:以下所有内容都是垃圾!
通过使用根据容器定位/调整大小的伪元素,我们可以只使用一个输入文件(不需要额外的标记),并按通常的方式设置样式。
Demo
<input type="file" class="foo">
<style>
.foo {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
border-radius: 5px;
outline: 0;
}
.foo:hover:after {
background: #5978f8;
}
.foo:after {
transition: 200ms all ease;
border-bottom: 3px solid rgba(0,0,0,.2);
background: #3c5ff4;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: 'Upload Something';
line-height: 60px;
border-radius: 5px;
}
</style>
享受的家伙!
旧的更新
把这个变成了Stylus mixin。应该很容易让你们中的一个酷SCSS猫转换它。
file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)
用法:
<input type="file">
input[type="file"]
file-button(200px)
一个快速粗暴的方法是将标签设置为按钮,并将位置设置为绝对,这样它就会浮动在原始按钮上,你仍然可以看到文件名。不过,我正在考虑移动解决方案。
我能够做到这与纯CSS使用下面的代码。我已经使用了bootstrap和font-awesome。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> . <input type="file" style="display: none;"> < / >标签
这种方法为您提供了完全的灵活性!ES6 / VanillaJS!
html:
<input type="file" style="display:none;"></input>
<button>Upload file</button>
javascript:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('input[type="file"]').click();
});
这隐藏了输入文件按钮,但实际上是从另一个普通按钮点击它,显然您可以像设置其他按钮一样设置它的样式。这是除了无用的dom节点之外没有任何缺点的唯一解决方案。多亏了display:none;,输入按钮在DOM中不保留任何可见空间。
(我已经不知道该支持谁了。但我是从Stackoverflow网站的某个地方得到这个想法的。)
这里有一个简单的css解决方案,它创建了一个一致的目标区域,并让你的伪造元素的风格,无论你喜欢。
基本思想是这样的:
有两个“假”元素(一个文本输入/链接)作为你的真实文件输入的兄弟。绝对放置它们,让它们完全在你的目标区域上方。 用div包装你的文件输入。将overflow设置为hidden(这样文件输入就不会溢出来),并使它恰好是你想要的目标区域的大小。 在文件输入上设置不透明度为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>