Custom text input
Weird rendering in IE when line-height set
HTML
<ul>
<li>
<input type="text" value="1"/>
</li>
<li>
<input type="text" value="2"/>
</li>
<li>
<input type="text" value="3"/>
</li>
<li>
<input type="text" value="4"/>
</li>
<li>
<input type="text" value="5"/>
</li>
</ul>
CSS
input[type=text] {
border: 1px solid #bbb;
padding: 2px 4px;
border-radius: 3px;
/* line-height: 1.6em; */
height: 1.6em;
}
input[type=text]:hover, input[type=text]:focus {
box-shadow: 1px 1px 4px rgba(20, 20, 20, 0.1) inset;
}
input[type=text]:focus {
border: 1px solid #5D95EA;
outline: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
line-height: 1.6em;
margin: 3px 0;
}