Issue with File button in IE & Firefox

Question

I have an issue styling the file button in Firefox and IE. It works fine in Chrome.

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

http://jsfiddle.net/fcky9syz/ - not an answer, just a fiddle — Dmitry, Sep 29 '14 at 06:46
i think this is what you want http://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie — Vitorino fernandes, Sep 29 '14 at 06:53
http://stackoverflow.com/questions/572768/styling-an-input-type-file-button - I think this thread has an answer — Dmitry, Sep 29 '14 at 06:58

score 0 · Answer 1 · answered Sep 29 '14 at 07:17

you can try this also

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

Working fiddle

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

KiranD · Accepted Answer · 2014-10-01T00:34:22.907

I got the solution.

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

Working fiddle is at jsfiddle.net/8g6rw492

if you want to provide an answer with a fiddle, you must add some code — dippas, Oct 01 '14 at 00:27

Manjunath Siddappa · Answer 3 · 2014-09-29T06:56:09.627

-1

Instead of input try button

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

Change to

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

here is the working fiddle, it works in Mozilla and IE9 Enjoy!

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

edited Sep 29 '14 at 06:56

answered Sep 29 '14 at 06:47

Manjunath Siddappa

2,126
2
21
40

There is a small issue here. How do I handle the file control? And the Finish button can't have upload text. – KiranD Sep 29 '14 at 06:53
1

I don't think `button type="file"` exist. Your fiddle does not open an upload dialog. – Dmitry Sep 29 '14 at 06:55
this question already answered here http://stackoverflow.com/questions/10643270/file-upload-button-and-odd-text-cursor-behavior-in-ie – Manjunath Siddappa Sep 29 '14 at 07:00

Issue with File button in IE & Firefox

3 Answers3