在Firefox中，带有填充的选择框上的下拉按钮上的右边缘在悬停时消失

Question

在Firefox中，如果我有一个padding-top和padding-bottom设置为3px的选择框，我会得到一个下拉按钮，当我将鼠标悬停在它上面时，右边缘会消失。

为什么？

HTML：

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

CSS：

select
{
  padding-top: 3px;
  padding-bottom: 3px;
}

JSFiddle

Answer 1

select{
   padding-top: 3px;
   padding-bottom: 3px;
   background-color: #FFFFFF;
   border: 1px solid #CCCCCC;
   border-radius: 4px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
   color: #555555;
   display: block;
   font-size: 14px;
   height: 34px;
   line-height: 1.42857;
   transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
   vertical-align: middle;    

 }

Answer 2

我做了一些改变

select{ 
     padding:3px 1px;
}

请看一下。希望它会帮助你:)

Answer 3

当我们渲染一个没有任何css的'select'元素时，它与我们在所有边上渲染一个带有1px填充的select元素完全相同。这意味着默认情况下，select的所有边都有1px的填充。 当我们增加或减少填充属性时，我们必须确保添加1px右边填充以保持默认填充。

我用photoshop测量高度和宽度以确定尺寸。

我创造了一个演示这个理论的小提琴。希望它有所帮助。

http://jsfiddle.net/2BeVN/

所以填充权限：1px似乎是必需的。

select{padding-top: 3px;padding-bottom: 3px;padding-right: 1px}