Background color inheritance issue on input field with IE10

by audetwebdesign

HTML

<h3>For Firefox, Chrome and other compliant broswers, inluding IE10</h3>

<div class="container">
    <input type=text value="Some text" maxlength=50 size=52>
</div>

<h3>For IE8</h3>

<div class="container2">
    <input type=text value="Some text" maxlength=50 size=52>
</div>

CSS

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

/* For IE8... */
div.container2 {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container2 input {
    background-color: #aaa;
    border-width: 0;
}
div.container2:hover {
    background-color: yellow;
}
div.container2:hover input {
    background-color: yellow;
}
div.container2 input:focus {
    background-color: white;
}