View Source Styling

LiveSelect supports 3 styling modes:

  • tailwind: uses standard tailwind utility classes (the default)
  • daisyui: uses daisyUI classes.
  • none: no styling at all.

The choice of style is controlled by the style option in live_select/3. tailwind and daisyui styles come with sensible defaults which can be extended or overridden via options.

This is what each default style looks like:

daisyui

daisyui:

daisyui example

(the actual colors may differ depending on the selected daisyui theme)

tailwind

tailwind:

tailwind example

These defaults can be selectively overridden or extended using the appropriate options to live_select/3.

You can control the style of the following elements:

  1. The outer container of the live_select component
  2. The text input field
  3. The text input field when an option has been selected
  4. The dropdown containing the selectable options
  5. The single selectable option(s)
  6. The currently active option

Here's a visual representation of the elements:

styled elements

For each of these elements there is an {element}_class and for some also an {element}_extra_class option, which can be used to override or extend the default CSS classes for the element, respectively. You can't use both options together: use {element}_class to completely override the default classes, or use {element}_extra_class to extend the default.

The following table shows the default styles for each element and the options you can use to adjust its CSS classes.

ElementDefault tailwind classesDefault daisyUI classesClass override optionClass extend option
containerrelative h-full text-blackdropdown dropdown-opencontainer_classcontainer_extra_class
text inputrounded-md h-full w-full disabled:bg-gray-100 disabled:placeholder:text-gray-400 disabled:text-gray-400input input-bordered w-fulltext_input_classtext_input_extra_class
text input selectedborder-gray-600 text-gray-600 border-2input-primary text-primarytext_input_selected_class
dropdownabsolute rounded-xl shadow z-50 bg-gray-100 w-fulldropdown-content menu menu-compact shadow rounded-box bg-base-200 p-1 w-fulldropdown_classdropdown_extra_class
optionrounded-lg px-4 py-1 hover:bg-gray-400option_classoption_extra_class
active optiontext-white bg-gray-600activeactive_option_class

For example, if you want the options to use black text, the active option to have a red background, and remove rounded borders from both the dropdown and the active option, call live_select/3 like this:

live_select(form, field,
      active_option_class: "text-white bg-red-800",
      dropdown_extra_class: "!rounded-xl",
      option_extra_class: "!rounded-lg text-black",
      style: :tailwind
)

Selectively removing classes from defaults

You can remove classes included with the style's defaults by using the !class_name notation in an {element}_extra_class option. For example, if a default style is rounded-lg px-4, using an extra class option of !rounded-lg text-black will result in the following final class being applied to the element:

px-4 text-black