0

I make a container and I want to change its background color after the user clicks that container but the problem is, it is a div, and the focus state is not working on the div but the active state is working,

this is the code link

<div className="flex space-x-3 items-center hover:bg-messenger-gray-100 focus:bg blue-50 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
      {/* the code above on the top level div is not working*/}
      {/* Focus is not working on this div */}
      {/* active state works */}

        <span className=" font-normal whitespace-nowrap ">Muhammad Hamza</span>
</div>
  1. how can I make the div focusable?
  2. Is this focus property also don't work on <span></span>?
Usama Abdul Razzaq
  • 643
  • 2
  • 10
  • 19
  • Does this answer your question? [Which HTML elements can receive focus?](https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus) – Dzianis Roi Jun 20 '22 at 10:20

1 Answers1

1

You can not apply focus for div or span. However to achieve you can try one of the hack I use. You can define the thing in button.

Below is the code:

<script src="https://cdn.tailwindcss.com"></script>


<div class="p-10">
<div class="flex space-x-3 items-center hover:bg-messenger-gray-100 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
        <span class=" font-normal whitespace-nowrap">Muhammad Hamza</span>
</div>

<button class=" w-full flex my-4  items-start hover:bg-gray-100   p-2 rounded-lg group cursor-pointer border active:bg-blue-50 focus:bg-pink-300 focus:border-pink-500"> Muhammad Hamza with focus </button>

</div>
MagnusEffect
  • 3,363
  • 1
  • 16
  • 41