你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
我通常会使用简单的javascript来定制文件输入标记。一个隐藏的输入字段,点击按钮,javascript调用隐藏字段,简单的解决方案与任何css或一堆jquery。
<button id="file" onclick="$('#file').click()">Upload File</button>
其他回答
当<input type="file">被创建时,所有渲染引擎都会自动生成一个按钮。从历史上看,这个按钮是完全不可样式的。然而,Trident和WebKit通过伪元素添加了钩子。
三叉戟
从IE10开始,文件输入按钮可以使用::-ms-browse伪元素来设置样式。基本上,应用于普通按钮的任何CSS规则都可以应用于伪元素。例如:
:: -ms-browse { 背景:黑色; 颜色:红色; 填充:1 em; } < input type = " file " >
Windows 8操作系统的IE10界面显示如下:
WebKit
WebKit为其文件输入按钮提供了一个带有::-webkit-file-upload-button伪元素的钩子。同样,几乎任何CSS规则都可以应用,因此Trident的例子也可以在这里工作:
:: -webkit-file-upload-button { 背景:黑色; 颜色:红色; 填充:1 em; } < input type = " file " >
在OS X操作系统下,Chrome 26界面显示如下:
最好的方法是使用伪元素: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;
}
这种方法为您提供了完全的灵活性!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网站的某个地方得到这个想法的。)
我发现了一个非常简单的方法来切换文件按钮到图片。 你只需要给图片贴上标签,然后把它放在文件按钮的顶部。
<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>
单击标记图像时,选择文件按钮。
我发现最好的方法是有一个输入类型:文件,然后将其设置为display: none。给它一个id。创建一个按钮或任何您想要打开文件输入的其他元素。
然后在它(按钮)上添加一个事件侦听器,当单击它时,它会模拟对原始文件输入的单击。 比如点击一个名为hello的按钮,但它会打开一个文件窗口。
示例代码
//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn">
<i class="paper plane icon"></i>
</button>
<input type="file" id="file" class="input-file" />
javascript
var attachButton=document.querySelector('.attach-button');
attachButton.addEventListener('click', e=>{
$('#file').trigger("click")
})