你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
<label>
<input type="file" />
</label>
您可以将input type="file"包装在输入的标签中。样式标签,无论你喜欢和隐藏输入display: none;
其他回答
CSS在这里可以做很多事情…耍点小花招……
<div id='wrapper'>
<input type='file' id='browse'>
</div>
<style>
#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}
#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
</style>
::参考::http://site-o-matic.net/?viewpost=19
修道院
可见性:隐藏的技巧
我通常会使用可见性:隐藏技巧
这是我设计的按钮
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
这是input type=file按钮。注意可见性:隐藏规则
<input type="file" id="upload" style="visibility:hidden;">
这是JavaScript将它们粘合在一起。它的工作原理
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>
这些答案很好,它们都适用于非常具体的用例。也就是说,他们固执己见。
所以,这里有一个答案,它没有任何假设,但无论你如何修改它都是有效的。你可以用css改变设计,添加javascript,可能会显示一个文件名的变化,等等,它仍然会一直工作。
代码:
这里是核心css
.file-input{
pointer-events: none;
position: relative;
overflow: hidden;
}
.file-input > * {
pointer-events: none;
}
.file-input > input[type="file"]{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: all;
cursor: pointer;
height: 100%;
width: 100%;
}
和核心html:
<div class="file-input">
<input type="file"/>
</div>
如您所见,我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的,并且总是占用容器的宽度/高度。因此,您可以根据自己的需要进行定制。样式包装成一个按钮,使用一些js显示文件名选择,等等,没有什么会打破,只要上述核心代码保持不变。
正如你将在演示中看到的,我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。
演示:JSFIDDLE
当点击有样式的<div>时,只需使用trigger()函数模拟点击<input>。我在<div>中创建了自己的按钮,然后在点击我的<div>时触发了输入上的单击。这允许你创建你想要的按钮,因为它是一个<div>,模拟点击你的文件<input>。然后在<input>上使用display: none。
// div styled as my load file button
<div id="simClick">Load from backup</div>
<input type="file" id="readFile" />
// Click function for input
$("#readFile").click(function() {
readFile();
});
// Simulate click on the input when clicking div
$("#simClick").click(function() {
$("#readFile").trigger("click");
});
这里我们使用span来触发类型文件的输入,并且我们简单地定制了span,所以我们可以使用这种方式添加任何样式。
注意,我们使用带有可见性:hidden选项的input标记,并在span中触发它。
.attachFileSpan { 颜色:# 2 b6dad; 光标:指针; } .attachFileSpan:{徘徊 文字修饰:下划线; } <h3>自定义输入文件类型</h3> <input id="myInput" type="file" style="visibility:hidden"/> <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()" > 附加文件 < / span >
参考