你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
下面是一个解决方案,它还显示了所选的文件名: 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; }
其他回答
我在这里找到了一个使用jQuery的非常聪明的解决方案,它可以在所有旧浏览器和新浏览器中工作。 它使用实际的文件浏览按钮来处理所有样式和click()问题。 我做了一个简单的javascript版本:小提琴 解决方案非常简单,就像天才一样:让文件输入不可见,然后用一段代码把它放在mousecursor下面。
<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>
<script>
function file_ho(e, o, a) {
e = window.event || e;
var x = 0,
y = 0;
if (o.offsetParent) {
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (o = o.offsetParent);
}
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}
</script>
<style>
.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity=0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
</style>
这些答案很好,它们都适用于非常具体的用例。也就是说,他们固执己见。
所以,这里有一个答案,它没有任何假设,但无论你如何修改它都是有效的。你可以用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
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
修道院
:: 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 > > < /形式
我觉得这个答案是必要的,因为这里的大多数答案都过时了。
可见性:隐藏的技巧
我通常会使用可见性:隐藏技巧
这是我设计的按钮
<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>