IE和Firefox中的“文件”按鈕出現問題

Question

我在Firefox和IE中設置文件按鈕樣式時遇到問題。 在Chrome瀏覽器中工作正常。

的CSS

    .custom-file-input { background-color:#44c767;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px; border:1px solid #18ab29;display:inline-block;cursor:pointer;
        color:#ffffff;font-family:arial;font-size:17px;padding:16px 31px;text-decoration:none;text-shadow:0px 1px 0px #2f6627; }
    .custom-file-input:hover { background-color:#5cbf2a; }
    .custom-file-input:active { position:relative; top:1px; }

    .custom-file-input::-webkit-file-upload-button { visibility: hidden; }
    .custom-file-input::before { content: 'Upload';outline: none; white-space: nowrap;-webkit-user-select: none;cursor: pointer;font-size: 11pt; }
    input[type="file"] { width: 11%; height:55px; float:left; }
    input[type="button"] { overflow:hidden; }

的HTML

     <input type="file" id="imgModalBanner" class="custom-file-input" value="Upload" onchange="readURL(this)" />
     <input type="button" id="btnFinish" class="custom-file-input" value="Finish" />

Answer 1

代替input嘗試button

<input type="file" id="imgModalBanner" class="custom-file-input" value="Upload" onchange="readURL(this)" />

改成

<button type="file" id="imgModalBanner" class="custom-file-input" value="Upload" onchange="readURL(this)" />

這是工作的小提琴，可在Mozilla和IE9 Enjoy中使用！

http://jsfiddle.net/jnzy8gs7/4/

Answer 2

你也可以嘗試

<label class="add-photo-btn">
        upload
        <span>
            <input type="file" id="myfile" name="myfile" />
        </span>
</label>

input[type="file"]{
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    opacity: 0;
    filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
    left:0;
}

.add-photo-btn{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    text-align:center;
    background-color:#83b81a;
    color:#fff;display:block;
    width:197px;
    height:31px;
    font-size:18px;
    line-height:30px;
    float:left;
}

工作提琴

http://jsfiddle.net/JJRrc/1324/

Answer 3

我找到了解決方案。

的HTML

<label class="custom-file-input">
Upload
<span>
<input type="file" id="myfile" name="myfile" onchange="readURL(this)" />
</span>
</label>
<input type="button" id="btnFinish" class="custom-file-input" value="Finish" />

的CSS

.custom-file-input { 
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px; 
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627; 
}
.custom-file-input:hover {
     background-color:#5cbf2a;
}
.custom-file-input:active { 
position:relative;
top:1px; 
}
.custom-file-input::-webkit-file-upload-button { 
visibility: hidden; 
}
.custom-file-input::before { 
/*content: 'Upload';*/
outline: none; 
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-size: 11pt; 
}
input[type="file"] {
width: 11%; 
height:55px; 
float:left; 
display:block;
}
input[type="button"] { 
overflow:hidden;
}
input[type="file"]{
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
opacity: 0;
filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
left:0;
}

工作提琴位於jsfiddle.net/8g6rw492