你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
你如何风格输入类型=“文件”按钮?
<输入类型=“文件” />
当前回答
<label>
<input type="file" />
</label>
您可以将input type="file"包装在输入的标签中。样式标签,无论你喜欢和隐藏输入display: none;
其他回答
这些答案很好,它们都适用于非常具体的用例。也就是说,他们固执己见。
所以,这里有一个答案,它没有任何假设,但无论你如何修改它都是有效的。你可以用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
如果有人仍然关心如何在没有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找到按钮,并分配一个样式给它
你也可以看看这个记录
<label>
<input type="file" />
</label>
您可以将input type="file"包装在输入的标签中。样式标签,无论你喜欢和隐藏输入display: none;
我在这里找到了一个使用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>