Skip to tool

Customizable Select Styler

Generate CSS for custom <select> styling.

Output will appear here…

How to Use This Tool

  1. Fill in Background Color, Text Color, Border Color, Border Radius, and Padding. Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About Customizable Select Styler

About Customizable Select Styler

Generate CSS for custom <select> element styling with cross-browser support.

About

Generate CSS for custom <select> element styling with cross-browser support.
Generate CSS for custom <select> element styling with cross-browser support.
Runs in browser
Yes
No signup required
Yes

Examples

Dark theme

Dark theme
Input
{
  "bgColor": "#1a1a2e",
  "textColor": "#e0e0e0",
  "borderColor": "#0f3460",
  "borderRadius": "8px",
  "padding": "12px 16px"
}
Output
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #1a1a2e;
  color: #e0e0e0;
  border: 2px solid #0f3460;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e0e0e0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.custom-select:focus {
  outline: none;
  border-color: #e0e0e0;
  box-shadow: 0 0 0 3px #e0e0e033;
}

.custom-select option {
  background-color: #1a1a2e;
  color: #e0e0e0;
}

Light theme

Light theme
Input
{
  "bgColor": "#ffffff",
  "textColor": "#333333",
  "borderColor": "#cccccc",
  "borderRadius": "4px",
  "padding": "8px 12px"
}
Output
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  color: #333333;
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.custom-select:focus {
  outline: none;
  border-color: #333333;
  box-shadow: 0 0 0 3px #33333333;
}

.custom-select option {
  background-color: #ffffff;
  color: #333333;
}

Minimal

Minimal
Input
{
  "bgColor": "#f0f0f0",
  "textColor": "#000000",
  "borderColor": "#999999",
  "borderRadius": "0px",
  "padding": "6px"
}
Output
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f0f0f0;
  color: #000000;
  border: 2px solid #999999;
  border-radius: 0px;
  padding: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.custom-select:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px #00000033;
}

.custom-select option {
  background-color: #f0f0f0;
  color: #000000;
}

Use Cases

  • Check customizable select styler values while you draft a page, spreadsheet, or config.
  • Fill Background Color, Text Color, Border Color and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related Tools

Related tools: