Я только что столкнулся с неясной проблемой с блоками select
, имеющими дополнительное пространство вокруг текста, которое не кажется частью модели окна. Вот две картины того, что я имею в виду:
Вот пример этого (на JSFiddle), или вы можете посмотреть источник в моем примере ниже:
select, input
{
padding:0px;
font-size:20px;
}
select.textIndent
{
text-indent:-1.5px;
}
select.paddingOffset
{
padding-left:2.5px;
}
input.paddingOffset
{
padding-left:5px;
}
<h3>No Padding Test</h3>
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />