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

你也可以试试这个

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

工作 fiddle

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