你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
如果你正在使用Bootstrap 3,这对我来说是有效的:
参见https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <span class="btn btn-primary btn-file"> Browse...<input type="file"> </span>
它会产生以下文件输入按钮:
认真的,去https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/看看吧
其他回答
<label>
<input type="file" />
</label>
您可以将input type="file"包装在输入的标签中。样式标签,无论你喜欢和隐藏输入display: none;
如果有人仍然关心如何在没有JavaScript的情况下做到这一点,让我完成Josh的回答:
如何显示文件名的文本:
最简单的方法是将这两个元素设置到一个位置:相对,给标签一个更高的z-index,并给输入文件负边距,直到标签文本在你想要的位置。不要在输入时使用display:none !
例子:
input[type="file"] {
position:relative;
z-index:1;
margin-left:-90px;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
position:relative;
z-index:2;
background:white;
}
我能想到的唯一方法是在它被渲染后用javascript找到按钮,并分配一个样式给它
你也可以看看这个记录
这里我们使用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 >
参考
当点击有样式的<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");
});