选择框中的文本填充 [英] Text Padding in Select Boxes

问题描述

我刚刚遇到一个晦涩的问题，选择框有额外的空间周围的文本，似乎不是框模型的一部分。以下是我的意思两张照片：

解释了一些缓解选择框不一致的方法，那么您可以阅读这篇文章从Smashing杂志关于样式表单元素（一定要检查的意见和人们已经有的问题与选择）。

I've just encountered an obscure issue with select boxes having additional space around text which doesn't seem part of the box model. Here are two pictures of what I mean:

Here is an example of it happening (on JSFiddle) or you can view the source to my example below:

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" />

I have already worked out two methods of trying to work around it, by either having a negative text-indent or using left padding to adjust the input and select boxes to match up.

Both of these methods aren't perfect. There is a difference between the negative text-indent for Chrome and Firefox resulting in a noticeable space if the select and input are lined up one after the other. Trying to offset the padding can make maintaining the styling of various input and select fields somewhat difficult where you are applying a percentage of padding.

I first noticed it on a client's website where part of the word was being cut off however if that empty space was not there, the word looks like it would fit.

While I can work around this particular issue for my client (eg. wider select box, less padding), I want to know whether there is a different solution for hiding/offsetting/removing the "other" padding on the left/right of the text. Is there another CSS property I should be looking at?

I have a feeling this might just be how select boxes work but would like the collective hive of SO to prove me wrong.

Edit 1

I am hoping that the solution would be pure-CSS. I know that if I use a drop-in replacement for a select box using a JS library, it would not have the same issue.

Edit 2

Just to better clarify what I am after, the select box has an additional padding outside the box model. The pictures below show 6px for the select box and ~3px for the input. I would like to either control this particular padding or remove it entirely. I have already tried with text-indent and using a padding offset to align the text in the input and select elements but both of these seem hackish. I think there is a better CSS way of doing this.

解决方案

Unfortunately, this extra whitespace is added by the browser's rendering engine. Form element rendering is inconsistent across browsers, and in this case is not determined by CSS.

Take a look at this article from Mozilla explaining some ways to mitigate select box incosistency, then you might read this article from Smashing Magazine about styling form elements (be sure to check out the comments and the problems people have had with selects).

这篇关于选择框中的文本填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！