{"id":26134,"date":"2026-01-30T11:00:00","date_gmt":"2026-01-30T09:00:00","guid":{"rendered":"https:\/\/www.lamapoll.de\/blog\/?p=26134"},"modified":"2026-01-30T12:08:26","modified_gmt":"2026-01-30T10:08:26","slug":"stern-ratings-mit-verschiedenen-farben-stylen","status":"publish","type":"post","link":"https:\/\/www.lamapoll.de\/blog\/stern-ratings-mit-verschiedenen-farben-stylen\/","title":{"rendered":"Kann ich die Sterne im Stern-Rating farbig anpassen?"},"content":{"rendered":"\n

Ja, diese M\u00f6glichkeit gibt es. LamaPoll<\/a> bietet Ihnen verschiedene Optionen, um ein Stern-Rating nach Belieben farbig anzupassen. Dies geht entweder \u00fcber das Farben-Men\u00fc des Fragebogens oder \u00fcber CSS-Codes. Im Folgenden stellen wir Ihnen drei Varianten vor.<\/p>\n\n\n\n

1.) Sterne \u00fcber „Farben“ anpassen<\/mark><\/h2>\n\n\n\n

Um ein Stern-Rating einheitlich einzuf\u00e4rben, k\u00f6nnen Sie die F\u00fcllfarbe der Bedienelemente im Men\u00fcpunkt „Farben“ anpassen. <\/p>\n\n\n\n

\"\"<\/a>
Abb. 1 – Die Farbe der Sterne l\u00e4sst sich \u00fcber „F\u00fcllfarbe Bedienelemente“ \u00e4ndern. <\/em><\/figcaption><\/figure>\n\n\n\n

Klicken Sie dazu einfach in den hier grau hinterlegten Bereich (siehe Abbildung 1), w\u00e4hlen anschlie\u00dfend eine geeignete Farbe bzw. nutzen einen konkreten Farbcode und speichern ab. Das Resultat: S\u00e4mtliche Sterne erhalten zun\u00e4chst einen Rand in der gew\u00e4hlten Farbe. Sobald Sie \u00fcber die Sterne hovern oder diese anklicken, werden sie komplett mit der entsprechenden Farbe gef\u00fcllt (siehe Abbildung 2).<\/p>\n\n\n\n

\"\"<\/a>
Abb. 2 – Nach der Farbanpassung werden die Sterne der Bewertungsfrage pink dargestellt. <\/em><\/figcaption><\/figure>\n\n\n\n

Beachten Sie: Wenn Sie die F\u00fcllfarbe der Bedienelemente auf diese Weise anpassen, werden nicht nur alle Stern-Ratings des gesamten Fragebogens ge\u00e4ndert, sondern auch weitere Bedienelemente. Dazu geh\u00f6ren z. B. s\u00e4mtliche Auswahlfelder oder Schieberegler.<\/p>\n\n\n\n

2.) Sterne per CSS-Code anpassen<\/mark><\/h2>\n\n\n\n

Die Nutzung von CSS-Codes im Bereich „CSS“ erm\u00f6glicht es Ihnen, Stern-Ratings gezielt anzupassen. Das hat nicht nur den Vorteil, dass andere Bedienelemente unber\u00fchrt bleiben, sondern erm\u00f6glicht zudem Farbanpassungen f\u00fcr einzelne Sterne innerhalb des Ratings.<\/p>\n\n\n\n

2.1. Einfarbiges Stern-Rating<\/h3>\n\n\n\n

Um ein einfarbiges Stern-Rating einzubinden, nutzen Sie den nachfolgenden CSS-Code:<\/p>\n\n\n\n

.poll .poll-page .scale-question.stars .star:before {\nfont-size:2.5em;\ncolor:#ffea00 !important\n}<\/code><\/pre>\n\n\n\n
In unserem Beispiel (siehe Abbildung 3) haben wir zudem einen Code zum Vergr\u00f6\u00dfern der Sterne eingebunden. Wollen Sie dies nicht, dann entfernen Sie „font-size:2.5em;“ aus dem Code oder ver\u00e4ndern die Zahl der font-size nach Wunsch. Um die Farbe der Sterne anzupassen, \u00e4ndern Sie einfach den Farbcode hinter „color“.<\/p>\n\n\n\n
\"\"<\/a>
Abb. 3 – Einfarbig eingef\u00e4rbtes Stern-Rating mit vergr\u00f6\u00dferten Sternen.<\/em><\/figcaption><\/figure>\n\n\n\n
Dieser CSS-Code f\u00e4rbt s\u00e4mtliche Stern-Ratings Ihrer Umfrage ein. Wollen Sie hingegen eine konkrete Frage mit Stern-Rating einf\u00e4rben, m\u00fcssen Sie die Fragen-ID innerhalb des Codes erg\u00e4nzen. <\/p>\n\n\n\n
.poll #question_NUMMER\/ID .scale-question.stars .star:before {\nfont-size:2.5em;\ncolor:#ffea00 !important\n}<\/code><\/pre>\n\n\n\n
Die Fragen-ID entnehmen Sie nach einem Klick auf „Frage bearbeiten“. Ersetzen Sie den Part „NUMMER\/ID“ des CSS-Codes mit der entsprechenden Fragen-ID und speichern Sie ab. Nutzen Sie gerne unsere genaue Anleitung zur Anpassung einzelner Fragen mit individuellen CSS-Befehlen: Einzelne Fragen individuell mit CSS-Codes anpassen<\/a><\/p>\n\n\n\n
2.2. Stern-Rating mit Farbverlauf<\/h3>\n\n\n\n
Neben einfarbigen Stern-Ratings gibt es auch die M\u00f6glichkeit, einen Farbverlauf wie bei einer Ampel darzustellen. Der Farbverlauf wird deutlich, sobald Sie \u00fcber die einzelnen Sterne hovern oder diese anklicken (siehe Abbildung 4). <\/p>\n\n\n\n
\"\"<\/a>
Abb. 4 – Stern-Rating mit Farbverlauf<\/em><\/figcaption><\/figure>\n\n\n\n
Verwenden Sie hierf\u00fcr den nachfolgenden CSS-Code:<\/p>\n\n\n\n
.thV5 .scale-question.stars .star-icons i:nth-child(1).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(1).active:before {\ncolor:#b22222 !important\n}\n.thV5 .scale-question.stars .star-icons i:nth-child(2).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(2).active:before {\ncolor:#dc143c !important\n}\n.thV5 .scale-question.stars .star-icons i:nth-child(3).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(3).active:before {\ncolor:#ff4500 !important\n}\n.thV5 .scale-question.stars .star-icons i:nth-child(4).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(4).active:before {\ncolor:#ffd700 !important\n}\n.thV5 .scale-question.stars .star-icons i:nth-child(5).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(5).active:before {\ncolor:#32cd32 !important\n}<\/code><\/pre>\n\n\n\n
Das hier beispielhaft hinterlegte Farbschema l\u00e4sst sich nat\u00fcrlich individuell anpassen. \u00c4ndern Sie dazu die Farbcodes des CSS-Befehls. <\/p>\n\n\n\n
Wie auch beim Beispiel des einfarbigen Stern-Ratings wirkt sich der CSS-Code f\u00fcr den Farbverlauf auf alle Stern-Ratings innerhalb des Fragebogens aus. Soll sich der Code nur auf eine bestimmte Frage beziehen, ben\u00f6tigen Sie erneut die Fragen-ID, die Sie \u00fcberall einsetzen, wo die „Nummer\/ID“ auftaucht:<\/p>\n\n\n\n
.poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(1).selected:before, .poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(1).active:before {\ncolor:#b22222 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(2).selected:before, .poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(2).active:before {\ncolor:#dc143c !important\n}\n\n.poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(3).selected:before, .poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(3).active:before {\ncolor:#ff4500 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(4).selected:before, .poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(4).active:before {\ncolor:#ffd700 !important\n}\n\n.poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(5).selected:before, .poll #question_NUMMER\/ID .scale-question.stars .star-icons i:nth-child(5).active:before {\ncolor:#32cd32 !important\n}<\/code><\/pre>\n\n\n\n
\u00dcbrigens: Beide CSS-Befehle f\u00fcr Stern-Ratings mit Farbverlauf f\u00e4rben f\u00fcnf Sterne ein. Das erkennen Sie jeweils an den Code-Parts „i:nth-child(1<\/strong>)“ usw. Um mehr als f\u00fcnf farbige Sterne darzustellen, kopieren Sie sich einfach einen Code-Block und passen die entsprechende Zahl innerhalb der Klammern fortlaufend an. Um einen sechsten Stern einzuf\u00e4rben, erg\u00e4nzen Sie somit: <\/p>\n\n\n\n
.thV5 .scale-question.stars .star-icons i:nth-child(6<\/strong>).selected:before, .thV5 .scale-question.stars .star-icons i:nth-child(6<\/strong>).active:before {\ncolor:#32cd32 !important\n}<\/code><\/pre>\n\n\n\n
F\u00fcr weitere praktische CSS-Codes schauen Sie gern in unserem Helpdesk vorbei: Design-Funktionen CSS-Befehle<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Ja, diese M\u00f6glichkeit gibt es. LamaPoll bietet Ihnen verschiedene Optionen, um ein Stern-Rating nach Belieben farbig anzupassen. Dies geht entweder \u00fcber das Farben-Men\u00fc des Fragebogens oder \u00fcber CSS-Codes. Im Folgenden stellen wir Ihnen drei Varianten vor. 1.) Sterne \u00fcber „Farben“ anpassen Um ein Stern-Rating einheitlich einzuf\u00e4rben, k\u00f6nnen Sie die F\u00fcllfarbe der Bedienelemente im Men\u00fcpunkt „Farben“ […]<\/p>\n","protected":false},"author":1,"featured_media":1434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,156],"tags":[2737,2740,2743,2531,1498],"class_list":["post-26134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-feedbackmanagement","category-frage-der-woche","tag-css-codes-fuer-farbige-stern-rating","tag-stern-rating-mehrfarbig","tag-stern-rating-mit-farbverlauf","tag-stern-skala-anpassen","tag-umfrage-mit-css-designen"],"_links":{"self":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/26134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/comments?post=26134"}],"version-history":[{"count":19,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/26134\/revisions"}],"predecessor-version":[{"id":28964,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/26134\/revisions\/28964"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media\/1434"}],"wp:attachment":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media?parent=26134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/categories?post=26134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/tags?post=26134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}