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 that contains the selectable options
  5. The single selectable option(s)
  6. The currently active option

Here's a visual representation of the elements:

styled elements

In tags mode there are 4 additional stylable elements:

  1. The tag showing the selected options
  2. The tags_container that contains the tags
  3. selected_option. This is an option in the dropdown that has already been selected. It's still visible, but can't be selected again
  4. available_option. This is an option in the dropdown that has not been selected and is available for selection

styled elements_tags

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 daisyui classesDefault tailwind classesClass override optionClass extend option
active_optionactivebg-gray-600 text-whiteactive_option_class
available_optioncursor-pointercursor-pointer hover:bg-gray-400 roundedavailable_option_class
containerdropdown dropdown-openh-full relative text-blackcontainer_classcontainer_extra_class
dropdownbg-base-200 dropdown-content menu menu-compact p-1 rounded-box shadow w-fullabsolute bg-gray-100 rounded-md shadow w-full z-50dropdown_classdropdown_extra_class
optionpx-4 py-1 roundedoption_classoption_extra_class
selected_optiondisabledtext-gray-400selected_option_class
tagbadge badge-primary p-1.5 text-smbg-blue-400 flex p-1 rounded-lg text-smtag_classtag_extra_class
tags_containerflex flex-wrap gap-1 p-1flex flex-wrap gap-1 p-1tags_container_classtags_container_extra_class
text_inputinput input-bordered pr-6 w-fulldisabled:bg-gray-100 disabled:placeholder:text-gray-400 disabled:text-gray-400 pr-6 rounded-md w-fulltext_input_classtext_input_extra_class
text_input_selectedinput-primaryborder-gray-600 text-gray-600text_input_selected_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