IE和Firefox中的文件按鈕問題

我在Firefox和IE中遇到文件按鈕樣式問題。它在Chrome中正常工作。IE和Firefox中的文件按鈕問題

File button and normal button in Firefox and IE

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

來源

2014-09-29 KiranD

請擺弄它。謝謝\ – Tushar 2014-09-29 06:34:13

我已經嘗試了幾個小時。但是，沒有運氣。 – KiranD 2014-09-29 06:36:08

Atleast爲其他人撥弄它 – Tushar 2014-09-29 06:36:45

我得到了解決。

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

來源

2014-10-01 00:22:27 KiranD

如果你想提供一個小提琴的答案，你必須添加一些代碼 – dippas 2014-10-01 00:27:09

更新它。謝謝：） – KiranD 2014-10-01 00:34:39

而不是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享受！

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

來源

2014-09-29 06:47:03

有一個小問題在這裏。我如何處理文件控制？完成按鈕不能有上傳文本。 – KiranD 2014-09-29 06:53:06

我不認爲'button type =「file」'存在。你的小提琴沒有打開上傳對話框。 – Dmitry 2014-09-29 06:55:15

這個問題已經在這裏回答了 http://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie – 2014-09-29 07:00:52

你可以試試這個也

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

來源

2014-09-29 07:17:42

IE和Firefox中的文件按鈕問題

回答

相關問題