Question

对所有人来说，我遇到了这个问题：

<input type ="file" name ="fileUpload">

我做了一个文件输入，默认显示“选择文件”。我真的不喜欢它，所以我想让它像Button一样问题是当我尝试用Button标签或带有Button属性的span来包围它时

我想知道我是否可以隐藏“选择文件”使文件输入标签像一个按钮

感谢您将来的答案祝你今天愉快卢卡

Answer 1

<style>
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.upload {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>

<div class="fileUpload">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

Answer 2

只需将其包裹在一个范围内，然后color:white跨越。例如像http://jsfiddle.net/25bju0a4/

Answer 3

＆＃13;

<style type="text/css">

.button {
  width: 124px;
  height: 27px;
}
.button::-webkit-file-upload-button {
  visibility: hidden;
}
.button:before {
  content: 'Select some files';
  display: inline-block;  
  background: -webkit-linear-gradient(top, #F9F9F9, #E3E3E3);
  background: -moz-linear-gradient(top, #F9F9F9, #E3E3E3);
  background: -ms-linear-gradient(top, #F9F9F9, #E3E3E3);
  background: -o-linear-gradient(top, #F9F9F9, #E3E3E3);
  background: linear-gradient(top, #F9F9F9, #E3E3E3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.button:hover:before {
  border-color: black;
}
.button:active:before {
  background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9));
  background: -webkit-linear-gradient(top, #E3E3E3, #F9F9F9);
  background: -moz-linear-gradient(top, #E3E3E3, #F9F9F9);
  background: -ms-linear-gradient(top, #E3E3E3, #F9F9F9);
  background: -o-linear-gradient(top, #E3E3E3, #F9F9F9);
  background: linear-gradient(top, #E3E3E3, #F9F9F9);
}
</style>

＆＃13;

<input type ="file" name ="fileUpload" class=button>

＆＃13;

输入标签定制

3 个答案: