Question

我正在使用此文件上传器http://blueimp.github.io/jQuery-File-Upload/index.html 但由于某些原因Add Files按钮也显示文件上传。我想像链接一样隐藏它们。目前的样子

https://www.dropbox.com/s/41uc6v1b00287lc/screen.PNG

我复制了他们使用的相同的CSS

 <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Add files...</span>
        <input type="file" name="files[]" multiple>
</span>


.fileinput-button {
  position: relative;
  overflow: hidden;
}



 .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input[type="file"] {
display: block;      
}

Answer 1

尝试使用：visibility: hidden;）

Answer 2

你错过了一些CSS。看看this fiddle它只是错过了图标，但按你想要的方式工作

.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
input[type=file] {
display: block;
}

如何使用css隐藏具有简单跨度的Fileupload

2 个答案: