Styling file input button with IE8

Question

I'm using basically this method here: https://coderwall.com/p/uer3ow to style my file input section but it doesn't seem to work in IE8; all I see is the corner of a huge button.

HTML:

<div class="upload_btn">
    <span>Choose File</span>
    <input type="file" name="item_file_upload_1" id="item_file_upload_1">
</div>

CSS:

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

Answer 1

Ok, with a modification of this answer: https://stackoverflow.com/a/1948200/472501

I was able to apply the following CSS for IE8 which fixed the problem:

.forms .upload_btn > input[type="file"] {
    filter: alpha(opacity=0);
}