从下拉列表中删除边框

Question

我使用这个CSS来设置下拉样式：

HTML code：

<div class="rd-navbar-contact-info">
<select class="logout" size="1" name="j_idt8">
<option value="Cream Latte">Help</option>
<option value="Extreme Mocha">Profile Settings</option>
<option value="Buena Vista">Logout</option>
</select>
</div>

.logout {
    margin: 50px;
    /*border: 1px solid #111;*/
    background: transparent;
    width: 150px;
    padding: 5px 35px 5px 5px;
    font-size: 16px;
    border: 0px solid #ccc;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat transparent;
    color: white;
}

.logout option {
    background-color: black;
}

如何删除选项列表的边框？或者我可以将其改为黑色吗？

Answer 1

我认为您应该尝试删除border属性或尝试制作 border:0px solid #000它可能有效

Answer 2

你不能。事实上，您可以使用CSS随意编辑选择框，但下拉列表不是HTML，因此由用户用来查看您的页面的浏览器和/或操作系统呈现。您可以设置宽度，高度，项目数和背景等属性，但不能设置字体，边框属性等。