Fungerar som det ska – radioknappar 1-5 som stjärnor
Det vore fantastiskt smidigt om man kan få radioknappar med nummer 1-5 att fungera som five-star-rating utan att man behöver installera extra plugin för det.
Det fungerar i grunden fint med lite enkel CSS:
Men, jag får det bara att fungera om alla input och label ligger på samma nivå, i samma div. I den här CSS:en kan stjärnor med lägre nummer tändas med den man klickar på. Då känns det som five-star-rating.
Utmaningen – få det att fungera på samma sätt i Elementor Forms
Elementor Forms delar upp radioknapparnas inputs i separata <span>. Det har säkert sina fördelar men då funkar inte längre samma CSS.
Jag förstår inte vad jag behöver göra med CSS:en för att få till det. Hur får jag de andra stjärnorna (input) att känna av vad som händer om användaren klickar på exempelvis stjärna 3 eller 4, inne i span-taggen intill?
Det går fint att markera en ”stjärna”, men vi vill såklart att även stjärnorna med lägre nummer tänds, så att man tänder en till fem stjärnor. Inte bara den markerade stjärnan.