How to style a dropdown menu (select element) using CSS without JavaScript?

Problem:

You have a webpage with a dropdown menu. You want to style it. There are many solutions with javascript. But you need to style it using CSS only.

Solution:

Method-1:  Use appearance property

HTML:

<select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Pancakes</option>
</select>

CSS:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background: red;
    background: url(http://www.site.com/favicon.ico);
} 

Explanation:

Here “appearance:none” property is used to hide default styling. For supporting different browsers –webkit, -moz is used. For styling purpose, further codes are written. For example, we add icon by adding background:url.

N.B: This isn’t applicable to all browsers.

Method-2: Use “overflow: hidden”

HTML:

<div class=”styled”>
    <select>
        <option>Apples</option>
        <option selected>Pineapples</option>
        <option>Pancakes</option>
    </select>
</div>

CSS:

.styled select {
    background: transparent;
    width: 150px; 
} 
.styled{  
    width: 120px;
    overflow: hidden;
    background: url(http://www.site.com/favicon.ico) ;
}

Explanation:

“Overflow:hidden” prohibits the scroll button visible. By doing it, other styling can be done.