Interactive rating component using Tailwind

Community feedback

• 

  CauaVSJBispo•30

  @CauaVSJBispoPosted over 1 year ago

  hi, can you send me your code?

  anyway, in css you need to use this:

  .(classname):hover{ background-color: orange; cursor: pointer; }

  to change the color when you hovering any number and

  .(classname):focus{ background-color: LightGrey; }

  to change the color when you select any number

  i did that:

  .number{ width: 40px; height: 40px; border-radius: 50%; border: none; background-color: var(--DarkBlue); color: var(--White); }

  .number:hover{ background-color: var(--Orange); cursor: pointer; }

  .number:focus{ background-color: var(--LightGrey); }

  0

  ---

  

  Antonio Silva•180

  @AsilvazavalaPosted over 1 year ago

  @CauaVSJBispo thanks, this is my code:

  <section class="w-full"> <form class="text-White flex justify-between items-center transition-colors [&>label]:bg-Circle [&>label]:rounded-full [&>label]:py-2 [&>label]:px-4 [&>label]:cursor-pointer md:[&>label]:px-5 " name="form1" action=""> <input class="hidden" type="radio"> <label class="hover:bg-Orange item min-[370px]:text-[18px] md:text-lg" for="one">1</label> <input class="hidden" type="radio"> <label class="hover:bg-Orange item min-[370px]:text-[18px] md:text-lg" for="two">2</label> <input class="hidden" type="radio"> <label class="hover:bg-Orange item min-[370px]:text-[18px] md:text-lg" for="three">3</label> <input class="hidden" type="radio"> <label class="hover:bg-Orange item min-[370px]:text-[18px] md:text-lg" for="four">4</label> <input class="hidden" type="radio"> <label class="hover:bg-Orange item min-[370px]:text-[18px] md:text-lg" for="five">5</label> </form> </section>

  0