你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
我能想到的唯一方法是在它被渲染后用javascript找到按钮,并分配一个样式给它
你也可以看看这个记录
其他回答
我发现了一个非常简单的方法来切换文件按钮到图片。 你只需要给图片贴上标签,然后把它放在文件按钮的顶部。
<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>
单击标记图像时,选择文件按钮。
这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。
基本的html:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">
当你准备好时,一定要在输入上设置样式:不透明度:0 你不能设置display: none,因为它需要是可点击的。但是你可以把它放在“new”按钮下面,或者如果你喜欢的话,把它塞进z-index的其他东西下面。
设置一些jquery,当你点击图像时,点击真正的输入。
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});
现在你的按钮开始工作了。更改时只需剪切并粘贴值。
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();
发长音!您可能需要将val()解析为更有意义的内容,但您应该已经全部设置好了。
我发现最好的方法是有一个输入类型:文件,然后将其设置为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")
})
如果你正在使用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/看看吧
下面是一个解决方案,它还显示了所选的文件名: http://jsfiddle.net/raft9pg0/1/
HTML:
<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>
JS:
$(function() {
$("input:file[id=file-upload]").change(function() {
$("#file-upload-value").html( $(this).val() );
});
});
CSS:
input[type="file"] {
display: none;
}
.custom-file-upload {
background: #ddd;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px; }