CSS 如何隐藏默认选择文件按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26895125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide default choose file button
提问by user1526912
How can I hide the default choose file button ?
如何隐藏默认的选择文件按钮？
Here is my html:
这是我的 html：
<div class="col-md-4">
<span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse
<input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" />
</span>
</div>
The button is styled nicely with bootsrap button info colors and the plus icon.
该按钮的样式很好，带有 bootsrap 按钮信息颜色和加号图标。
I simply cannot get rid of the grey "Choose file" button. Any help is appreciated.
我根本无法摆脱灰色的“选择文件”按钮。任何帮助表示赞赏。
I have tried every solution on StackOverflow
我已经尝试了 StackOverflow 上的所有解决方案
回答by tika
Simple. Give the inputenough padding-topso that it hides. Do not forget to do the box-sizingthing!!
简单的。给input足够的，padding-top以便它隐藏。不要忘记做这box-sizing件事！！
input#file {
display: inline-block;
width: 100%;
padding: 120px 0 0 0;
height: 100px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4;
border-radius: 20px;
background-size: 60px 60px;
}<form>
<input id="file" type="file" />
</form>回答by Anubhav
Here is what you might be looking for
这是您可能正在寻找的
What i did here is hide the original input using display: nonestyle on it and using jQuery click()on another div to simulate the click on the input.
我在这里所做的是使用display: none样式隐藏原始输入，并click()在另一个 div 上使用 jQuery来模拟对输入的点击。
NOTE:I have used split('\\')to escape \as it is used in the fakepath returned from the file chooser.
注意：我曾经使用split('\\')过转义，\因为它用于从文件选择器返回的假路径中。
回答by Sonhja
Looking for several answers through Stackoverflow and other tutorials, I ended up doing this code:
通过 Stackoverflow 和其他教程寻找几个答案，我最终做了这个代码：
$('#selectedFile').change(function () {
var a = $('#selectedFile').val().toString().split('\');
$('#fakeInput').val(a[a.length -1]);
});input#fakeInput {
width: 100%;
background-color: #f8f8f8;
border-radius: 8px;
display:block;
padding: 11px 0;
box-sizing: border-box;
border:initial;
height: 3em;
}
#buttonImage {
float: right;
position: absolute;
right: 0;
top: 0;
background: #02a39c;
padding:10px;
color: white;
font-weight: bold;
border-radius: 0px 8px 8px 0px;
height:1.25em;
}
#fakeDiv {
width: 500px;
position: relative;
display: inline-block;
}
#selectedFile {
opacity:0;
position:absolute;
left: 0;
top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fakeDiv">
<input type="file" id="selectedFile" />
<input type="text" id="fakeInput" />
<span onclick="document.getElementById('selectedFile').click();" id="buttonImage" >Browse</span>
</div>Basically, you have to do it in a tricky way.
基本上，你必须以一种棘手的方式做到这一点。
- Create an input type="file", make it invisible (with opacity or visibility property, if you set display=none, it won't work).
- Put a regular input and format it as you wish
- Put a fake button (in my case a span)
- Make the button click to launch the input type="file"click
- Just fill the regular input with what you uploaded with the not visible input file
- 创建一个input type="file"，使其不可见（使用不透明度或可见性属性，如果设置 display=none，它将不起作用）。
- 输入常规输入并根据需要对其进行格式化
- 放一个假按钮（在我的情况下是一个跨度）
- 使按钮单击以启动input type="file"单击
- 只需使用您上传的不可见输入文件填充常规输入
NOTE:If code snippet is not working (my first time posting a Code snippet) try this JsFiddle.
注意：如果代码片段不起作用（我第一次发布代码片段）试试这个 JsFiddle。
