I am puzzled by the fact that, despite resetting their properties, the width and height of both the input and select boxes are different (you can see for yourself on this fiddle):
HTML
<div class="myDiv">
<input class="myInput" />
<select class="mySelect">
<option value="">Some</option>
</select>
<br />
<br />
<select class="mySelect">
<option value="">Some</option>
</select>
</div>
CSS
.myDiv
{
padding:30px;
}
.myInput
{
border: 1px solid #000000;
width: 252px;
margin:0;
padding:0;
height:20px;
}
.mySelect
{
border: 1px solid #000000;
width: 252px;
margin:0;
padding:0;
height:20px;
}
Why is this happening? What other properties do I need to reset?
I understand that some properties are difficult to define, like border color or select button style, but shouldn't the size be consistent at least...