Search code examples
csstailwind-cssdaisyui

DaisyUI - How to change focus colors of menu items?

I'm experiencing a similar issue to what's described in this question:

(Tailwind - DaisyUI) Is there anyways to change hover and active colors of dropdown items?

I am trying to achieve the same effect showcased on the DaisyUI dropdown menu page, where once you click an item it stays selected (it's background changes the color):

DaisyUI dropdown menu

This is me trying to replicate the same menu:

My dropdown menu

This is the corresponding code block:

        <div class="menu menu-horizontal space-x-3 px-1">
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn">Phones</div>
            <ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-base-100 w-52 mt-4">

<!-- I have also tried to use "focus:bg-primary", which did not work,
and "hover:bg-primary", which did work,
but it changed the background color only on hover (obviously) -->

              <li class="focus-visible:bg-primary"><a>Phone 1</a></li>
              <li><a>Phone 2</a></li>
            </ul>
          </div>
          <a class="btn">Settings</a>
        </div>

I am setting the custom theme colors in tailwind.config.js, and the primary is set to red:

daisyui: {
    themes: [
      {
        mytheme: {
          primary: '#FF0000',
          'primary-focus': '#FF0000',
          'primary-content': '#FF0000',
          secondary: '#f000b8',
          'secondary-focus': '#bd0091',
          'secondary-content': '#ffffff',
          accent: '#37cdbe',
          'accent-focus': '#2aa79b',
          'accent-content': '#ffffff',
          neutral: '#3d4451',
          'neutral-focus': '#2a2e37',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#d1d5db',
          'base-content': '#1f2937',
          info: '#2094f3',
          success: '#009485',
          warning: '#ff9900',
          error: '#ff5724'
        }
      }
    ]
  }

Additionally, I've tried to move the "focus:bg-primary" / "focus-visible:bg-primary" into the child hyperlink tag, to no avail. At this point I have no idea what is the right way to enforce a color change when an item is selected.

I expect the item's background to change the color when the item is selected (clicked).

Solution

  • According to the DaisyUI docs (https://daisyui.com/components/dropdown/#method-2-using-css-focus) to use focus we need to use div role="button" so your code would look like this.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
<div class="menu menu-horizontal space-x-3 px-10" style="padding-left: 150px;">
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn">Phones</div>
        <ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-base-100 w-52 mt-4">    
          <li><div role="button" tabindex="0">Phone 1</div></li>
          <li><div role="button" tabindex="0">Phone 2</div></li>
      </ul>
      </div>
      <a class="btn">Settings</a>
  </div>