CSS选择选项错误

Question

我有选择和选项的问题，在Firefox中我看到这是正常的（小），但在谷歌浏览器中，它非常大而且不漂亮！

第二张照片显示 - 我想看到的内容和第一张节目 - 我看到了什么。

我想要<option>：

• font-size: 20px;

我想要<select>：

• text-align: center;

<select id="what">
 <option value="0">0</option>
 <option value="100">100</option>
 <option value="1000">1000</option>
</select>
<style>
    #what {
        width: auto;
        height: 60px;
        border: 0px solid #333;
        appearance: none;
        text-align: center;
        -moz-appearance: none;
        -webkit-appearance: none;
        font-size: 45px;
        color: red;
        background: rgba(0,0,0,0);
        border-bottom: 1px solid red;
        outline: none;
    }
    #what > option {
        height: 40px;
        color: #333;
        border: 0px; 
    }
</style>

请帮忙。

Answer 1

尝试设置选择框样式会给您带来很多交叉兼容性问题。你很难用CSS来解决这个问题。

我担心您需要编写或查找自定义选择框。我有一个非常类似的问题，最后用Javascript编写自己的问题。但那是一段时间以前 - 你可能能找到一些开源的东西。