输入标签定制

Question

何所有， 我得到了这个问题：

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

我做了一个文件输入，默认情况下dispalys“选择文件”。 我真的不喜欢它，所以我想使它像一个按钮问题是，当我尝试用按钮标记或跨度与按钮属性包围它

我想知道如果我可以隐藏“选择文件”进行文件输入标签就像一个按钮

感谢你的未来 有一个愉快的一天答案 卢卡

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

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