粗体时动态调整下拉宽度

Question

我有一个非常简单的下拉列表，例如：

<select>
    <option selected="selected" value="MyVeryFirstLongValue">MyFirstLongestValue</option>
    <option value="MyVerySecondLongValue">MySecondLongValue</option>
</select>

当我自己运行它时，下拉列表的宽度正是它所需要的。它会自动调整。但是，我现在的问题是当我将文本变为粗体时。

<select>
    <option selected="selected" value="MyVeryFirstLongValue">MyFirstLongestValue</option>
    <option value="MyVerySecondLongValue">MySecondLongValue</option>
</select>

select{
  font-weight: bold;
}

现在文字被切断了。如何根据文本保持自动宽度并使其加粗？下拉列表中的文字是动态的，所以我不能给它一个固定的宽度。

JS Fiddle Example

Answer 1

我只能在chrome

中重现它

也可以选择使用粗体选项：

select,option{
  font-weight: bold;
}

Answer 2

也许尝试在包装盒中添加一些填充物？

input {
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}