css選擇文件css樣式不起作用

Question

我正在嘗試用css樣式創建輸入文件按鈕。但它不起作用。我的CSS代碼woking所有瀏覽器，但風格不起作用....

這是我的腳本。 enter link description here

這是inptu類型的html代碼：

<input type="file" name="select_img" class="select_style" /> 

這是CSS代碼：

.select_style { 
    float:left; 
    width: 80px; 
    height: 27px; 
    padding: 0; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    color: rgba(255,255,255,1); 
    font: normal 12px/27px "Lucida Grande"; 
    border: 1px solid rgba(44,81,21,0.24); 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    background-image: rgba(235,235,235,1); 
    background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: linear-gradient(top, #00c714 0%,#008c10 100%); 
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    } 

Answer 1

大家好，這是我的解決方案的代碼感謝您的幫助，但所有的代碼是不是有用的我，我創造新的代碼，然後我解決我的問題。

點擊並查看jsfiddle.net

HTML輸入代碼是在這裏：

<input type="file" class="file-input"> 

只爲輸入型文件按鈕CSS：

是非常用戶完全我用rgb顏色與懸停效果。

.file-input { 
    color: transparent; 
} 
.file-input::-webkit-file-upload-button { 
    visibility: hidden; 
} 
.file-input::before { 
    content: 'Select files'; 
    color:#fff; 
    display: inline-block; 
    background-image: rgba(235,235,235,1); 
    background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%); 
    background-image: linear-gradient(top, #00c714 0%,#008c10 100%); 
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    border: 1px solid #999; 
    border-radius: 3px; 
    padding: 5px 8px; 
    outline: none; 
    white-space: nowrap; 
    -webkit-user-select: none; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 10pt; 
} 
.file-input:hover::before { 
    border-color: black; 
} 
.file-input:active { 
    outline: 0; 
} 
.file-input:active::before { 

    background-image: rgba(235,235,235,1); 
    background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%); 
    background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%); 
    background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%); 
    background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%); 
    background-image: linear-gradient(top, #008c10 0%,#00c714 100%); 
    -webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    -moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
    box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px; 
} 

body { 
    padding: 20px; 
} 

Answer 2

本教程：http://www.quirksmode.org/dom/inputfile.html給出瞭如何樣式輸入非常詳細的說明[type = file]與CSS。

Answer 3

給.select_style和0透明度，並與你的-1一個z-index沿着有其他樣式創建不同div元素。然後使用div上的相對定位將其放在與file輸入完全相同的位置。然後，當用戶點擊該樣式div時，他們實際上將點擊file輸入。

例子：

<div style="display: block; width: 100px; height: 20px; overflow: hidden;"> 
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button> 
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: -20px" /> 
</div> 

從這個答案摘自：https://stackoverflow.com/a/3030174/2374365

Answer 4

看這一個它可以幫助你

http://jsfiddle.net/gabrieleromanato/mxq9R/

HTML

<form action="" method="post" enctype="multipart/form-data"> 
    <div class="upload"> 
     <input type="file" name="upload"/> 
    </div> 
</form> 

CSS

iv.upload { 
    width: 157px; 
    height: 57px; 
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png); 
    overflow: hidden; 
} 

    div.upload input { 
     display: block !important; 
     width: 157px !important; 
     height: 57px !important; 
     opacity: 0 !important; 
     overflow: hidden !important; 
    }