选择框中的文本填充

Question

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

Here is an example of it happening (on 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" />

我已经找到了两种尝试解决问题的方法，通过使用否定text-indent或使用左边距填充调整input和select框来匹配。

这两种方法都不完美。 Chrome和Firefox的否定text-indent之间存在差异，如果select和input一个接一个地排列，则会产生明显的空间。尝试抵消填充可能会使您在应用一定百分比的填充时难以保持各种input和select字段的样式。

我首先在客户的网站上注意到它的部分字词被切断，但如果那个空格不存在，那么这个词看起来就像是适合的。

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

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

编辑1

我希望解决方案是纯CSS。我知道如果我使用JS库对select框进行直接替换，则不会出现同样的问题。

编辑2

为了更好地阐明我的目标，select框在框模型外面有一个额外的填充。下面的图片显示select框的6px和input的~3px。我想控制这个特殊的填充或完全删除它。我已经尝试使用text-indent并使用填充偏移来对齐input和select元素中的文本，但这两个看起来都是hackish。我认为有一种更好的CSS方式。

Answer 1

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

看看this article from Mozilla解释某些方法可以缓解选​​择框错误，然后您可以阅读Smashing Magazine中关于样式表单元素的this article（请务必查看评论和人们遇到的问题）有选择）。

Answer 2

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

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

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

注意：这不会产生好看的效果，只会在您的选择框中为您提供标准的填充/间距。要获得外观漂亮，可自定义的选择框，您可以完全控制填充/大小等，那里有大量的教程。这是我在快速谷歌搜索后发现的一个：

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

Answer 3

左侧填充：

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

这些值可能需要更广泛的跨浏览器测试，我稍后可能会更新。我使用一组CSS hacks来为每个浏览器分配不同的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 38+ (and Opera 25+) */
@supports (-webkit-appearance:none) and (font-stretch:normal) and (not (-ms-accelerator:true)) {
  .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;
    }
  }

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

Answer 4

一个不错的选择是用输入数据列表替换选择框

Answer 5

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

Answer 6

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

无论如何，您可以使用此＆＃34;技巧＆＃34;：

来解决问题

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

看看：

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

）

Answer 7

试试这个。它对我有用。

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

CSS

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