HTML輸入類型文件樣式更改不起作用

Question

誰能幫助我更改html中輸入類型“文件”的樣式。 我引用了以下鏈接，但我的問題仍未解決。我需要為瀏覽按鈕添加顏色，當我嘗試將樣式應用於瀏覽按鈕時，文本框消失了，我看不到我在文本中選擇的文件-框。 這是我的代碼：

<div id="fileimport">
    <div class="fileupload">
        <input type="file" name="Upload" style="position: relative" />
    </div>
</div>

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

div.fileupload {
    position: relative;
}

$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event) {
    files = event.target.value;
    if (files != null) {
        $("#ShiftValidate").prop('disabled', false);
    }
}

Answer 1

input[type=file] {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

Answer 2

按鈕消失的原因是因為您具有opacity: 0從而使其完全，完全，徹底和完全透明。 即不可見。 HG威爾的隱形人做到了，將自己的不透明度設為零！ 嘗試輸入諸如opacity: 0.5的值。

但是也需要Irfan的答案來更正您的語法。

Answer 3

基本上，您需要隱藏文件輸入並將其替換為包裝元素。 然后，您需要執行一些js來獲取要上傳的文件的名稱，並將其放入另一個輸入中。

<div class="btnWrap"> <span class="text">Choose file</span> <input type="file" name="file"> </div> <input type="text" class="fileNames" value="No file selected">

我為您制造了一支筆： http : //codepen.io/eplehans/pen/gbpZoQ