你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
可见性:隐藏的技巧
我通常会使用可见性:隐藏技巧
这是我设计的按钮
<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中使用fa-buttons:
.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } <div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
小提琴:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/
:: file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
这是一个新的选择器,可用于设置文件选择器按钮的样式。
它在最新的浏览器版本上得到了全面支持。
输入(type =文件)::file-selector-button { 边框:2px实体#6c5ce7; 填充:.2em .4em; border - radius: .2em; background - color: # a29bfe; 过渡:1; } 输入(type =文件)::file-selector-button:{徘徊 background - color: # 81 ecec; 边框:2px实体#00cec9; } < >形式 <label for="fileUpload">上传文件</label> <input type="file" id="fileUpload"> > < /形式
下面是另一个演示不同样式的代码片段:
.input_container { 边框:1px solid #e5e5e5; } 输入(type =文件)::file-selector-button { background - color: # fff; 颜色:# 000; 边界:0 px; 右边框:1px solid #e5e5e5; 填充:10px 15px; margin-right: 20 px; 过渡:0; } 输入(type =文件)::file-selector-button:{徘徊 background - color: # eee; 边界:0 px; 右边框:1px solid #e5e5e5; } < >形式 < div class = " input_container”> <input type="file" id="fileUpload"> < / div > > < /形式
我觉得这个答案是必要的,因为这里的大多数答案都过时了。
转换文件名的多个文件解决方案
自举例子
HTML:
<div>
<label class="btn btn-primary search-file-btn">
<input name="file1" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
<div>
<label class="btn btn-primary search-file-btn">
<input name="file2" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
1. jQuery JS:
$().ready(function($){
$('.search-file-btn').children("input").bind('change', function() {
var fileName = '';
fileName = $(this).val().split("\\").slice(-1)[0];
$(this).parent().next("span").html(fileName);
})
});
2. JS没有jQuery
Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
item.addEventListener("change", function() {
var fileName = '';
fileName = this.value.split("\\").slice(-1)[0];
this.parentNode.nextElementSibling.innerHTML = fileName;
});
});
用css隐藏它,并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值,这样用户就可以看到上传了什么。当表单提交时,间隔将清除[编辑]对不起,我一直很忙,是想更新这篇文章,这里是一个例子
<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button -->
<input type="submit" class="button" value="Change"/>
</div>
$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});
一个快速粗暴的方法是将标签设置为按钮,并将位置设置为绝对,这样它就会浮动在原始按钮上,你仍然可以看到文件名。不过,我正在考虑移动解决方案。