Styled Select Dropdown Template

Take full control over the appearance of dropdown menus with this custom-styled select box.

This template uses a clever CSS-only technique to wrap the native select element, allowing you to create a consistent, branded look with a custom down-arrow icon.

Screenshot showing a custom-styled dropdown select menu with a clean design and custom arrow.

Get Source Code → Preview →

About this Styled Select Dropdown

The native select element is notoriously resistant to styling. Different browsers and operating systems render it in completely different ways, especially the dropdown arrow. This template provides a common and effective way to achieve a consistent look.

The technique works by:

Placing the select element inside a wrapper div, which is set to position: relative.
Using CSS to hide the default dropdown arrow of the select element itself. This is done with the appearance: none; property.
Adding a custom arrow icon (as an SVG or a CSS pseudo-element) and positioning it absolutely on the right side of the wrapper div.

The main benefit is that you are still using the native select element, so you retain all of its built-in functionality and accessibility, such as keyboard navigation and the native option picker on mobile devices. You're simply putting a custom visual "skin" on top of it.

Features

Consistent Cross-Browser Appearance: Your dropdowns will finally look the same everywhere.
Fully Customizable: The background, border, font, and custom arrow can all be styled with CSS.
Accessible: Retains all the keyboard and screen reader functionality of a native select element.
Pure CSS Solution: No JavaScript is needed for this styling technique.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the styled select dropdown:

/* -- The Custom Arrow -- */
.custom-select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #555; /* This creates the downward-pointing triangle */
    pointer-events: none; /* The arrow doesn't block clicks */
}
/* -- The Select Element Itself -- */
.custom-select {
    /* Hide the default browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

/* General styling */
    width: 100%;
    padding: 12px 40px 12px 15px; /* Add padding to the right to not overlap the custom arrow */
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}
.custom-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
</style>

<div class="select-container">
    <h3>Choose a Category:</h3>
    <div class="custom-select-wrapper">
        <select class="custom-select" name="category" id="category">
            <option value="">-- Please select --</option>
            <option value="electronics">Electronics</option>
            <option value="fashion">Fashion</option>
            <option value="home_garden">Home & Garden</option>
            <option value="books">Books</option>
            <option value="sports">Sports & Outdoors</option>
        </select>
    </div>
</div>

View Output