为什么无法给select设置padding？

Question

为什么无法给select设置padding？

Answer 1

常规情况下，给它们设置padding可以生效，但表现均不相同，参考这里的兼容性表格。

可以做如下设置，让它们少难以控制一一些：

select, option {
  -webkit-appearance : none; /* To gain control over the appearance on WebKit */
  -moz-appearance : none; /* To gain control over the appearance on Gecko */

  /* To gain control over the appearance on Presto (Opera) and Trident (IE)
     Note that it also work on Gecko and has partial effects on WebKit */  
  background : none;
}

设置完毕后大致是这样的ref：

---

像是表单控件，标准中它们都属于replaced element，定义如下(ref)

Replaced element
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).
User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user's bank balance, then the UA might want to act as if that resource had no intrinsic dimensions.
The content of replaced elements is not considered in the CSS rendering model.

要点是：

它们大多有一些固有宽/高/比例；
它们的内部内容其实是超出CSS渲染模型的范围的——比如在IE8-里，表单控件就是一些COM组件；
浏览器或多或少支持了一些影响内部内容渲染的CSS属性（如padding、line-height等），让它们少桀骜难训了那么一点点。但这种支持并没有定义在CSS标准中，因此有各个UA之间的差异。