How do I style a select dropdown with CSS?

Remove native styling with appearance: none, then add custom styling and a background arrow: select { appearance: none; background: url('arrow.svg') no-repeat right 12px center / 16px; padding-right: 2.5rem; border: 1px solid #333; border-radius: 8px; }. The dropdown option list is controlled by the OS and cannot be fully styled with CSS.

Can I fully style a select dropdown with CSS?

Native select option elements have very limited CSS support — background-color and color work in some browsers but font, padding, and most other properties are ignored. For fully custom dropdowns, build one with HTML/CSS/JS using a button and a positioned list, which allows complete style control.

CSS Select Styler

Style native HTML select dropdowns with custom CSS. Generate clean, accessible custom selects with full control over colors, borders, and arrows.

Presets

Size

Height42px

Font Size14px

Padding X14px

Border Radius8px

Colors

Background

Text

Arrow

Border

Border Color

Width1px

Style

Focus State

Focus Border

Focus Ring

Arrow

Style

Arrow Size10px

Right Pad14px

Live Preview

Default

Default state

With value selected

Filled state

Disabled

Disabled state

Generated Code

📦 UIFlow Components Pack

28 copy-paste UI components (cards, toggles, inputs, modals…). One-time, €12.

✓ Matching set, tested together · ✓ Commercial & client projects OK · ✓ Instant download

€12 →

🎁 Not ready to buy? Get 10 free CSS presets →

CSS Select Styler

Live Preview

Generated Code

Related Tools