“I successfully managed to add the emoji alongside the stars. In the form, both the stars and the emoji transition from gray to yellow (the emoji changes from gray to its original/real color). I attempted to hide the stars using CSS, but then the emoji does not appear in gray to execute the rating transition.”
Hi,
Could you please clarify exactly which [class] you used to hide the stars? You can also share the snippet that you tried.
.hp-listing__action–review::before {
content: “👍”; /\* emoji de manos aplaudiendo */
margin-right: 6px; /* espacio entre icono y texto */
font-size:39px; /* tamaño del icono */
vertical-align: middle; /* alinear con el texto */
display: inline-block;
/* Ocultar el ícono original \*/
transform: scalex(-1);
}
Yes, it’s likely possible to achieve this through CSS customization. However, I apologize that we’re unable to assist further as this falls outside our support scope, troubleshooting custom CSS would require additional research and testing on our end.
As general guidance, you might want to try using CSS selectors like :active and :hover to set different colored emojis for different states.