CSS - 更改下拉列表/菜单，使它们在所有浏览器中都相同

Question

我的网站上有一些下拉列表，目前他们根据显示的浏览器/操作系统更改显示。

我想知道如何更改显示，使其在所有浏览器上看起来都一样（最好是如何使用mac显示）

任何帮助都将非常感谢!!

这是我目前的代码

<select name="university" id="university" >
          <option value="Aston">Aston University</option>
        </select>

Answer 1

好吧，你可以使用一些javascript和css。

<span class="select"><span>Aston University</span><select><option value="Aston">Aston University</option></select></span>

在.select上设置相对位置，并让实际的<select>填充整个空间，方法是将其设置为绝对位置并使用top:0;left:0;bottom:0;right:0;。在<select>上设置不透明度0，点击后仍然可以看到de选项。使用javascript从<select>获取当前值，并使用该值更新内部跨度（同时监听change事件）。

Voila，您现在可以根据自己的喜好设置.select样式。