你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
这种方法为您提供了完全的灵活性!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网站的某个地方得到这个想法的。)
其他回答
这种方法为您提供了完全的灵活性!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网站的某个地方得到这个想法的。)
更新没关系,这不能工作在IE或它的新兄弟,FF。可以正常工作在其他类型的元素上,但不能工作在文件输入上。更好的方法是创建一个文件输入和一个链接到它的标签。使文件输入显示无和boom,它在IE9+无缝工作。
警告:以下所有内容都是垃圾!
通过使用根据容器定位/调整大小的伪元素,我们可以只使用一个输入文件(不需要额外的标记),并按通常的方式设置样式。
Demo
<input type="file" class="foo">
<style>
.foo {
display: block;
position: relative;
width: 300px;
margin: auto;
cursor: pointer;
border: 0;
height: 60px;
border-radius: 5px;
outline: 0;
}
.foo:hover:after {
background: #5978f8;
}
.foo:after {
transition: 200ms all ease;
border-bottom: 3px solid rgba(0,0,0,.2);
background: #3c5ff4;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
color: #fff;
font-size: 20px;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: 'Upload Something';
line-height: 60px;
border-radius: 5px;
}
</style>
享受的家伙!
旧的更新
把这个变成了Stylus mixin。应该很容易让你们中的一个酷SCSS猫转换它。
file-button(button_width = 150px)
display block
position relative
margin auto
cursor pointer
border 0
height 0
width 0
outline none
&:after
position absolute
top 0
text-align center
display block
width button_width
left -(button_width / 2)
用法:
<input type="file">
input[type="file"]
file-button(200px)
当<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界面显示如下:
转换文件名的多个文件解决方案
自举例子
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;
});
});
这里有一个交叉兼容的方法,可以在Chrome, Firefox, Safari和IE中工作。
$(window).on('resize',function() { var eqw = $('input[type=text]').width(); $('textarea').width(eqw - 32); $('.fileoutline').width(eqw); }).trigger('resize'); $('.file+.file').hide(); $(".file").click(function() { var input = $(this).next().find('input'); input.click(); }); $("input[id='file1']").change(function () { $('.file+.file').show(); var filename = $(this).val(); $('.filename1').html(filename); $('.file').find('span').html('CHANGE FILE'); }); $("input[id='file2']").change(function() { var filename = $(this).val(); $('.filename2').html(filename); $('.file').find('span').html('CHANGE FILE'); }); form { width:55%;margin:0 auto;padding-left:3vw;text-align:left; } fieldset{border:0;margin:0;padding:0;} textarea{overflow: auto;height:25vh;resize:none;outline:none;width:93%;background:none;padding:8px 15px;display:block;text-align:left;border:1px solid #000;margin:0;color:#000;font:700 0.85em/2.2 'Futura Book',Arial,sans-serif;} input:focus{outline:none;} input[type=text]{font-weight:700;font-size:0.85em;line-height:2.2;background:none;text-align:left;letter-spacing:0.02em;height:33px;display:block;width:100%;border:none;border-bottom:1px solid #000;margin:0 0 28px;color:#000;} input:focus{outline:0;} .fileoutline { width:100%;margin:25px auto 0px;left:0;right:0;height:40px;border:1px solid #000;position:relative; } input[type=file] { -webkit-appearance: none;-moz-appearance:none;appearance: none;opacity:0;position:relative;width:100%;height:35px;font-weight:700;font-size:0.5em;line-height:28px;letter-spacing:0.2em;position: absolute;left: 0;top: 0;height: 100%;z-index:10; } .file,.filename1,.filename2,#submit { font-size:10px;letter-spacing:0.02em;text-transform:uppercase;color:#ffffff;text-align:center;width:35%;} .file,.filename1,.filename2 { font-weight:200;line-height:28px;} .filename1,.filename2 { width:375px;overflow:hidden;top:0;text-align:right;position:absolute;display:block;height:26px;color:#000;} .file { position:absolute;width:100px;top:6px;left:10px;background:#000;border-radius:14px; } ::-webkit-file-upload-button,::-ms-browse { width: 100%;height:25px;opacity: 0;-webkit-appearance: none;appearance: none; } #submit{border:none;height:32px;background: #000;box-shadow:0 0 0 0.5px #fff,0 0 0 5px #000;margin:35px 0;float:right;display:block;} <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="email" id="email" placeholder="Email address" /> <input type="text" type="text" name="name" id="title" placeholder="Name" /> <textarea rows="7" cols="40" name="description" id="description" placeholder="Description"></textarea> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file1"><div class="filename1">NO CHOSEN FILE</div></div></div> <div class="fileoutline"><div class="file"><span>CHOOSE FILE</span><input type="file" name="file[]" id="file2"><div class="filename2">NO CHOSEN FILE</div></div></div> <input type="submit" name="submit" value="Submit" id="submit"> </form>