Question

我有一个下拉菜单，css是background-color: transparent;

http://jsfiddle.net/6byBL/1

我知道它在Chrome中是透明的，它不是。它是白色的。同样在IE和Firefox中，当显示下拉列表中的值时，我可以将其更改为透明。

Answer 1

输入元素是浏览器和平台之间非常不一致的样式。并非所有浏览器都会设置输入字段的所有子元素的样式。

如果你真的坚持要控制外观，你可能想要使用HTML + JS创建替换小部件。但请注意，您可能会严重降低可用性，特别是对于屏幕阅读器，键盘用户或使用其他辅助技术的人。

就我个人而言，我刚接受表单元素是不一致的样式，并且通常会让它们由浏览器设置样式。然后你有输入元素，在大多数情况下看起来像操作系统控件。它确保了可用性，并且输入元素可以立即被用户识别。

Answer 2

这是由于浏览器呈现 - 您无法直接控制它，但如果您愿意“放弃”箭头，则还可以通过添加-webkit-appearance: none;来解决此问题：

body { background-image: url(http://i.stack.imgur.com/8Fwcz.jpg); }

#colour1 {
    padding: 5px;
    color: #000;
    font-size: 12px;
    background-color: transparent;
    -webkit-appearance: none;
}

<form> 
    <select name="colour1" id="colour1" width="100px">
        <option>Please Select</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
    </select>
</form>

如何将下拉菜单更改为透明

2 个答案: