Html 选择框中的文本填充

Text Padding in Select Boxes

提问by Turnerj

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

我刚刚遇到了一个模糊的问题，即select框在文本周围有额外的空间，这似乎不是框模型的一部分。这是我的意思的两张图片：

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

这是它发生的示例（在 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" />

I have already worked out two methods of trying to work around it, by either having a negative text-indentor using left padding to adjust the inputand selectboxes to match up.

我已经制定了两种尝试解决它的方法，通过使用负数text-indent或使用左填充来调整input和select框以匹配。

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

这两种方法都不是完美的。还有就是负之间的差异text-indent为Chrome和Firefox产生了显着的空间，如果select和input一字排开一个接一个。尝试抵消填充可能会使在应用一定百分比的填充时保持各种input和select字段的样式有些困难。

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 selectbox, 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?

虽然我可以为我的客户解决这个特定问题（例如，更宽的select框，更少的填充），但我想知道是否有不同的解决方案来隐藏/偏移/删除文本左侧/右侧的“其他”填充. 我应该查看另一个 CSS 属性吗？

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

我有一种感觉，这可能就是select盒子的工作方式，但希望 SO 的集体蜂巢证明我错了。

Edit 1

编辑 1

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

我希望解决方案是纯 CSS。我知道，如果我使用selectJS 库直接替换一个盒子，它不会有同样的问题。

Edit 2

编辑 2

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

为了更好地阐明我的目标，select盒子在盒子模型之外有一个额外的填充。下面的图片显示了select盒子的6px和 ~3px 的input. 我想控制这个特定的填充或完全删除它。我已经尝试过text-indent并使用填充偏移来对齐input和select元素中的文本，但这两种方法看起来都很笨拙。我认为有一种更好的 CSS 方法可以做到这一点。

采纳答案by Jerreck

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.

不幸的是，这个额外的空白是由浏览器的渲染引擎添加的。不同浏览器的表单元素渲染不一致，在这种情况下不是由 CSS 决定的。

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

看看Mozilla 的这篇文章，解释了一些减轻选择框不一致的方法，然后您可能会阅读Smashing Magazine 的这篇关于样式化表单元素的文章（一定要查看评论和人们在选择时遇到的问题）。

回答by Jonathan Crowe

The padding you are seeing is coming from the browser specific stylesheet. In chrome the attribute that is responsible for styling these dropdowns is -webkit-appearance, in firefox it is -moz-appearance

您看到的填充来自浏览器特定的样式表。在 chrome 中，负责为这些下拉列表设置样式的属性是-webkit-appearance，在 Firefox 中是-moz-appearance

You can standardize the look of your select menus by doing the following:

您可以通过执行以下操作来标准化选择菜单的外观：

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

Note:this will not produce good looking results, only give you standard padding/spacing in your select box. To achieve good looking, customizable select boxes that you can fully control the padding/size etc there are tons of tutorials out there. Here is one I found after a quick google search:

注意：这不会产生好看的结果，只会在您的选择框中为您提供标准的填充/间距。为了实现美观、可定制的选择框，您可以完全控制填充/大小等，那里有大量教程。这是我在快速谷歌搜索后找到的一个：

http://www.htmllion.com/default-select-dropdown-style-just-css.html

http://www.htmllion.com/default-select-dropdown-style-just-css.html

回答by Andrey

The left padding for:

左侧填充用于：

• OS X Chrome and Safari = 0px;
• IE 10+ = 2px;
• Edge 17 = 3px;
• OS X FF, Android 4.4 = 4px;

• OS X Chrome 和 Safari = 0px;
• IE 10+ = 2px;
• 边缘 17 = 3px;
• OS X FF，Android 4.4 = 4px；

These values might need more extensive cross-browser testing, I might update this later. I used a set of CSS hacksto assign different padding-leftvalues per browser using calcwith "base" value for left padding. I.e. if the base left padding is 5%, you could use the following SCSS (you can use CSS preprocessor to avoid duplication):

这些值可能需要更广泛的跨浏览器测试，我可能会在稍后更新。我使用一组CSS 技巧为padding-left每个浏览器分配不同的值，并使用calc左填充的“基本”值。即，如果左底边距为 5%，您可以使用以下 SCSS（您可以使用 CSS 预处理器来避免重复）：

$select-base-gap-x: 5%;
$select-gap-x: calc(#{$select-base-gap-x} - 4px);
$select-gap-x_edge: calc(#{$select-base-gap-x} - 3px);
$select-gap-x_ie: calc(#{$select-base-gap-x} - 2px);

.select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;

  padding-left: $select-gap-x;
  }

/* edge 12-18 */
@supports (-ms-ime-align:auto) {
  .select {
    padding-left: $select-gap-x_edge;
    }
  }

/* ie10-11 */
_:-ms-input-placeholder, :root .select {
  padding-left: $select-gap-x_ie;
  }

/* Chrome 37+ (and Opera 24+) */
@supports (-webkit-appearance:none) and (shape-outside:none) {
  .select {
    // Webkit doesn't need any correction for padding so it uses raw base value
    padding-left: $select-base-gap-x;
    }
  }

/* Safari 6.2,7.1+ */
_::-webkit-full-page-media, _:future, :root .select {
    // Webkit doesn't need any correction for padding so it uses raw base value
    padding-left: $select-base-gap-x;
  }

/* Firefox */
@-moz-document url-prefix() {
  .select {
    // Firefox recognizes hacks for webkit, so it needs a proper padding setting again
    padding-left: $select-gap-x;
    }
  }

Here is a demo link: https://codepen.io/andreyvolokitin/pen/wvvXZBm

这是一个演示链接：https: //codepen.io/andreyvolokitin/pen/wvvXZBm

回答by Adam Wodon

What resolved this for me was overriding Chrome's "box-sizing" attribute on select boxes. It has "border-box" - and I overrode that and used "content-box"

对我来说解决这个问题的是在选择框上覆盖 Chrome 的“box-sizing”属性。它有“边框框” - 我覆盖了它并使用了“内容框”

回答by Davide Scanu

To edit the select box you have to use jQuery (or javascript in general).

要编辑选择框，您必须使用 jQuery（或一般的 javascript）。

Anyway, you can solve the problem using this "trick":

无论如何，您可以使用这个“技巧”解决问题：

http://jsfiddle.net/Clear/hwzd88o5/6/

http://jsfiddle.net/Clear/hwzd88o5/6/

Look at:

看着：

select.textIndent
{
    height: 80px;
    line-height: 80px;
    width: 300px;
    padding-left: 50px !important;
}

;)

;)

回答by vandres

Try this. It worked for me.

尝试这个。它对我有用。

 <div id="div">
       <select size=1>
          <option value="0">Option 1</option>
          <option value="1">Option 2</option>
       </select>
  </div>

CSS

CSS

 #div option {padding-left: 5px;}