Home/Tools/Components/Select Dropdown Generator

Components · Generator

Select Dropdown Generator

Style native select elements with custom colors, borders, border radius, and custom arrow.

Select Style

Border Radius10px

Padding Horizontal14px

Padding Vertical10px

Font Size14px

Background

Text Color

Border Color

Focus Border Color

Arrow Color

Preview

Generated CSS

select.styled-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  color: #111827;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 42px 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,..."); /* arrow SVG */
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

select.styled-select:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 3px #0071e333;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Select Dropdown Generator?

Style native select elements with CSS. Customize the dropdown arrow, border, focus state, and typography.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Select Dropdown Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set size and padding

Adjust the padding. Right padding must be large enough to clear the custom arrow icon (typically 40px).

Choose border and focus style

Configure the border colour and the focus ring. A box-shadow focus ring is more visible than outline alone.

Copy the CSS

Apply the class to your select element. The dropdown options use browser default styling and cannot be fully customized with CSS.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

select.css

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 40px 10px 14px;
  font-size: 0.9375rem;
  color: #1d1d1f;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.custom-select:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.2);
}

appearance: none removes the browser default dropdown arrow so you can replace it with an SVG data URI. The custom arrow is positioned with background-position: right 14px center.

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Trying to style option elements

option elements have very limited CSS support. Background and colour work in some browsers; font-family, padding, and borders are largely ignored.

Fix: For fully custom dropdown menus, use a JavaScript component (listbox pattern) that replaces the native select. For standard dropdowns, native select with CSS appearance: none is the most accessible choice.

Pro tips

Pro tips for better results

★

The new selectlist element will replace this workaround

Chrome 130+ ships the experimental <selectlist> and <listbox> elements that allow full CSS customization of dropdown options. They require the experimental-web-platform-features flag in Chrome Canary.

FAQ

Frequently asked questions

Add a disabled option as the first child: <option value="" disabled selected>Choose...</option>. Style it with .custom-select option[disabled] { color: #999; }

Font-family on option elements is respected by most desktop browsers but ignored by Chrome on macOS. There is no reliable cross-browser way to use custom fonts in native select option elements.