How to apply changes to “select” option using CSS

Question

Here's a sample of what it should look like : Select box image

I get country names from a database and generate dynamic options on page. Right now, i am showing the Html code (Not the database code). I tried lots of links to change the design (CSS), but none of them work on "select". I want to be able to change padding , border, background-color, color or border-color . Can i apply modifications to all those, for "select", using css or not ?

I also want to only show the first 5 options (first 5 country names) in the dropdown list when the button is clicked, using a scrollbar .

 #country option:first-child { display: none; } #country { float: left; width: 96%; color: #fff; font-size: 1em; font-family: "Calibri"; margin-left: 5px; padding: 8px 0px; margin-top: 16px; border: 1px solid #00BCEA; padding: 9px 5px; width: 93%; border-radius: 4px; color: #00BCEA; } 

 <select id="country"> <option value="selectOption">Select your country</option> <option value="selectOption1">Select your country1</option> <option value="selectOption2">Select your country2</option> <option value="selectOption3">Select your country3</option> <option value="selectOption4">Select your country4</option> <option value="selectOption5">Select your country5</option> <option value="selectOption6">Select your country6</option> <option value="selectOption7">Select your country7</option> </select> 

Answer 1

You can try the below plugins. This will help you with styling your select box. The select plugins map the select element into HTML <ul> element and apply the styles on them. If you inspect the DOM the select element would be visible, but hidden from the browser.

• http://github.hubspot.com/select/docs/welcome/
• https://select2.github.io/

Hope this will help you

Thanks,