输入标记自定义

Question

Ho到所有，我遇到了这个问题：

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

我做了一个文件输入，默认情况下显示"选择一个文件"。我真的不喜欢它，所以我想让它像一个按钮。问题是，当我试图用按钮标签或带有按钮属性的跨度包围它时

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

谢谢你将来的回答祝你今天愉快Luca

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

只需将其包裹在一个span上，并将color:white赋给span。例如这样http://jsfiddle.net/25bju0a4/

Answer 3

<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>

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