Tom Select Custom CSS Guide (Single-Select)

1) How scoping works (what to target)

• Author CSS as if you were styling one plugin element instance.
• Target these classes directly; your rules apply only to this element instance:
  • Container & control: .ts-wrapper, .ts-control, .ts-control input, .ts-control .item, .clear-button
  • Dropdown & rows: .ts-dropdown, .ts-dropdown .option, .option.active, .option.selected, .no-results, .create, .optgroup-header, .highlight
• The dropdown is rendered in a separate layer for proper stacking, but you style it normally with .ts-dropdown … selectors—no special attributes are required.

2) Selector map (what you can style)

2.1 Root & control

• .ts-wrapper — root wrapper State flags you may see: .focus, .disabled, .loading, .has-items, .rtl
• .ts-control — visual input shell (border, radius, padding, background, shadow)
• .ts-control input — text input (placeholder, caret, text color) Placeholder: .ts-control input::placeholder
• .ts-control .item — selected label (single-select)
• .clear-button — clear/reset control (if enabled)

2.2 Dropdown

• .ts-dropdown — panel (border, radius, shadow)
• .ts-dropdown .option — a row in the list (padding, font, hover/active/selected)
• .ts-dropdown .no-results — empty state row
• .ts-dropdown .create — “create new” row (if enabled)
• .optgroup, .optgroup-header, .optgroup .option — grouped options (if used)
• .highlight — matched text emphasis inside option labels