Firefox中的CSS3缩放元素问题

Question

我有一个简单的div元素，其中包含一个选择框。使用css变换缩小div为：

<div>
    <select name="" id="">
        <option value="One">One</option>
        <option value="Two">Two</option>
    </select>
</div>

div {
    -webkit-transform: translate(0px, 0px) scale(0.6);
       -moz-transform: translate(0px, 0px) scale(0.6);
}

在Chrome中

在Firefox中：

这是一个演示（http://jsfiddle.net/codef0rmer/sZSV3）。 iPad中的输入框存在同样的问题，当输入获得焦点时光标放错位置。有什么办法可以解决吗？

Answer 1

您刚刚遇到 Bug 455164

  

CSS转换（不仅仅是翻译）不适用于选择框的选项

这不仅限于Scale，而是几乎任何其他CSS3转换。

基本上，您可以设置<select>的样式，而不是<option>的样式。

如果缩放选择（通过缩放其容器），则不会调整选项的大小，也不会移动选项。实际上，这些选项将用作未缩放原始位置的起始位置（尝试删除Scale转换并打开选择框以进行检查）。

你现在无能为力。

您需要一个B计划：尝试找到另一种方法来实现您不需要使用CSS3变换（例如使用Javascript），或者不使用选择框（使用自定义）选择框，例如......它已经完整了。

Answer 2

我记得，选项标签不能通过CSS设置样式。但如果您愿意，可以轻松使用jquery并设置Select Box样式。