Test five star

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.

Fredrik Hed

svarar på dina 
läkemedelsfrågor

Fredrik Hed är apotekare och besvarar frågor om läkemedel, kosttillskott och naturmedel.

Missa ingen viktig information

Gör som tusentals andra och prenumerera på våra nyhetsbrev. Det är gratis!

Varje torsdag kväll kommer nyhetsbrevet med alla inlägg från senaste veckan. Ibland kommer också specialutskick om specifika ämnesområden.

14 december 2024

Vi använder cookies för att ge dig den bästa upplevelsen på vår hemsida. Om du fortsätter att använda den här webbplatsen antar vi att du godkänner detta.