选择框中的文本填充

Question

我刚刚遇到一个模糊的问题,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" />

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

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

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

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

我有一种感觉,这可能只是select盒子如何工作,但希望SO的集体蜂巢证明我错了.

编辑1

我希望解决方案是纯CSS.我知道如果我使用selectJS库替换盒子的替代品,它就不会有同样的问题.

编辑2

为了更好地澄清我所追求的东西,select盒子在盒子模型外面有一个额外的填充物.下面的图片显示了6px的select盒子和~3px 的盒子input.我想控制这个特殊的填充或完全删除它.我已经尝试过text-indent并使用填充偏移量来对齐input和select元素中的文本,但这两者似乎都是hackish.我认为有一种更好的CSS方式来做到这一点.

Answer 1

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

看一下Mozilla的这篇文章,解释一些缓解选择框内容的方法,然后你可以阅读Smashing Magazine关于样式表单元素的这篇文章(一定要查看评论和人们选择的问题).

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 = 3px;
• OS X FF，Android 4.4 = 4px；

这些值可能需要更广泛的跨浏览器测试，我可能会在稍后更新。我使用一组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;
    }
  }

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