I've been trying to style my file input section using a method similar to the one outlined in this article: . However, I'm encountering issues specifically with compatibility in IE8; all I can see is the corner of an oversized button.
Here's how my HTML looks:
<div class="upload_btn">
<span>Choose File</span>
<input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>
And here's the CSS code I'm using:
.forms .upload_btn {
position: relative;
display: inline-block;
text-align: center;
width: 97px;
height: 27px;
font-weight: 300;
font-size: 16px;
line-height: 27px;
color: #393d59;
border: 2px solid #b9c0d6;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.forms .upload_btn > input[type="file"] {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
font-size: 200px;
opacity: 0;
}