Html – How to customize a select element through CSS to achieve this dark style


How can I create a select element like the below image?

enter image description here

My code is

    <option>-- Select City --</optoin>

This is available in jQuery, but I want to use pure CSS.

Best Solution

Here is a CSS-powered select menu; you can customize it as you need to:

label.custom-select {
    position: relative;
    display: inline-block;


.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;

/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events: none;

.no-pointer-events .custom-select:after {
    content: none;
<label class="custom-select">
        <option>Blue cheese with crackers</option>