Remove border from Drop down list

Question

I use this CSS to style drop down:

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;
}

How i can remove the border of the options list? Or can I change it to black?

Possible duplicate of [How to remove border of drop down list : CSS](http://stackoverflow.com/questions/14639638/how-to-remove-border-of-drop-down-list-css) — liggiorgio, Apr 17 '16 at 17:09

score 1 · Answer 1 · answered Apr 17 '16 at 16:58

1

i think you should try by removing border property or try by making border:0px solid #000 it might work

answered Apr 17 '16 at 16:58

Amitoj Singh Ahuja

413
4
10

score 0 · Answer 2 · answered Apr 17 '16 at 17:11

You just can't. The fact is you can edit the select box at your will using CSS, but the drop down list isn't HTML, thus is rendered by the browser and/or operative system the user is using to view your page. You can set attributes such as width, height, number of items and background, but you can't set the font, border attributes and so on.

Remove border from Drop down list

2 Answers2