Question 304117 in Html Question posted in
Some basic documentation can be found here.

style options on hover in HTML select tag

I am tring to style the options on hover but it doesn’t seem to respond by all means
I tried doing it both nativly and with tailwind

code –> https://play.tailwindcss.com/xzKArHLPZE

context:

  • I want to style this select as I’m using it in react-day-picker.
  • I have to select the "option" as a decendent as I am restricted by react-day-picker
  • solving it with tailwind is preferable as I don’t want to polute my global.css file too much

thanks in advance

Tags:

2

Answers


  1. 0

    Here’s a simple example of how you can apply styles using Tailwind CSS

    Select an option: 

      <select id="months" class="bg-cyan cursor-pointer border-4 border-gray-950 bg-green-400 hover:bg-red-500">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
</div>
    Login or Signup to reply.
  2. 0

    I think you will need some JavaScript for this to work.

    I added three inline-JS event listeners to modify the size of the <select> element.

    This solution will only change the background of the currently-hovered <option>.

    <div class="flex gap-3">
  <label for="months" class="block text-sm font-medium text-gray-900">
    Select an option:
  </label>
  <select id="months"
          class="bg-cyan cursor-pointer border-4 border-gray-950 bg-green-400"
          onfocus='this.size=10;'
          onblur='this.size=0;'
          onchange='this.size=1; this.blur();'>
    <option class="hover:bg-red-500" value="0">January</option>
    <option class="hover:bg-red-500" value="1">February</option>
    <option class="hover:bg-red-500" value="2">March</option>
    <option class="hover:bg-red-500" value="3">April</option>
    <option class="hover:bg-red-500" value="4">May</option>
    <option class="hover:bg-red-500" value="5">June</option>
    <option class="hover:bg-red-500" value="6">July</option>
    <option class="hover:bg-red-500" value="7">August</option>
    <option class="hover:bg-red-500" value="8">September</option>
    <option class="hover:bg-red-500" value="9">October</option>
    <option class="hover:bg-red-500" value="10">November</option>
    <option class="hover:bg-red-500" value="11">December</option>
  </select>
</div>

    Here is the reference solution that I applied:

    https://stackoverflow.com/a/60073662/1762224

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search