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/1. 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 example

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

tailwind:

tailwind example

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

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
  7. The clear button for the selection (if allow_clear is set)

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. The 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. The available_option. This is an option in the dropdown that has not been selected and is available for selection
  5. The clear buttons to remove the tags

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. These options accept both strings and lists of strings. 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
clear_buttoncursor-pointer hiddencursor-pointer hiddenclear_button_classclear_button_extra_class
clear_tag_buttoncursor-pointercursor-pointerclear_tag_button_classclear_tag_button_extra_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-full z-[1]absolute bg-gray-100 inset-x-0 rounded-md shadow top-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 to remove rounded borders from the options, have the active option use white text on a red background, and use green as a background color for tags instead of blue, render live_select/1 like this:

<.live_select
   form={my_form}
   field={my_field}
   id="live_select"
   mode={:tags}
   placeholder="Search for a city"
   active_option_class="text-white bg-red-800"
   option_extra_class="!rounded"
   tag_extra_class="!bg-blue-400 bg-green-200" />

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