# CSS-Bewertungsbeispiel

Dieses Beispiel zeigt, wie man die Antworten von [Bewertung](https://docs.ngsurvey.com/de/form-management/form-designer/questions/rating) aktivierter Frage anpasst.

Dieses Beispiel definiert eine CSS-Klasse mit dem Namen **my-rating-style**. Sie können diese neue Klasse im [question properties](https://docs.ngsurvey.com/de/form-management/form-designer/questions/question-properties) der Fragen setzen, die diesen Stil verwenden sollen. 

![](https://133942686-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8fLhS0bmfBRyq0HdUm%2F-MBchjNUATtKddNrrIpH%2F-MBcjqAbwMcJKffsmV0D%2Fimage.png?alt=media\&token=97ab4edf-224e-4d83-aa3e-792bd6887167)

Nachdem Sie die Klasse bei Ihren Fragen eingerichtet haben, verwendet sie den folgenden Code, um basierend auf dem Bewertungswert der Antwort jeder Frage unterschiedliche Farben zuzuweisen.

Antwortklassen werden im folgenden Format erzeugt, wobei answerratingvalue durch den tatsächlichen Bewertungswert des [Antwort-Eigenschaften](https://docs.ngsurvey.com/de/form-management/form-designer/answers/answer-properties):

```css
.ngs-question__answer.rating-weight-answerratingvalue
```

Hier der vollständige CSS-Code, der basierend auf den Bewertungswerten der Antworten unterschiedliche Farben für Radio-Buttons oder Kontrollkästchen erzeugt. 

```css
/*
 Legt eine Rahmen-, Hintergrund- und Textfarbe basierend auf der Bewertung der Antwort fest
*/

.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-0 .ngs-question__answer-selection-button{
    background-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-0 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-0 .mat-radio-outer-circle{
    border-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-0 .ngs-question__answer-label{
    color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .ngs-question__answer-selection-button{
    background-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-1 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-1 .mat-radio-outer-circle{
    border-color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-1 .ngs-question__answer-label{
    color:#e84c3d
}
.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .ngs-question__answer-selection-button{
    background-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-2 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-2 .mat-radio-outer-circle{
    border-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-2 .ngs-question__answer-label{
    color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .ngs-question__answer-selection-button{
    background-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-3 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-3 .mat-radio-outer-circle{
    border-color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-3 .ngs-question__answer-label{
    color:#e67e22
}
.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-4 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-4 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-4 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-5 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-5 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-5 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .ngs-question__answer-selection-button{
    background-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-6 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-6 .mat-radio-outer-circle{
    border-color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-6 .ngs-question__answer-label{
    color:#f1c40f
}
.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .ngs-question__answer-selection-button{
    background-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-7 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-7 .mat-radio-outer-circle{
    border-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-7 .ngs-question__answer-label{
    color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .ngs-question__answer-selection-button{
    background-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-8 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-8 .mat-radio-outer-circle{
    border-color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-8 .ngs-question__answer-label{
    color:#9baa1e
}
.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .ngs-question__answer-selection-button{
    background-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-9 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-9 .mat-radio-outer-circle{
    border-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-9 .ngs-question__answer-label{
    color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-checked.mat-accent:not(.mat-checkbox-disabled) .mat-checkbox-background:not(.mat-checkbox-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-button.mat-accent:not(.mat-radio-disabled) .mat-radio-inner-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .ngs-question__answer-selection-button{
    background-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-frame,.my-rating-style .ngs-question__answer.rating-weight-10 .mat-checkbox-inner-container,.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-button.mat-accent.mat-radio-checked:not(.mat-radio-disabled) .mat-radio-outer-circle:not(.mat-radio-disabled),.my-rating-style .ngs-question__answer.rating-weight-10 .mat-radio-outer-circle{
    border-color:#1eaa59
}
.my-rating-style .ngs-question__answer.rating-weight-10 .ngs-question__answer-label{
    color:#1eaa59
}

/*
 Blendet die nicht ausgewählten Bewertungsantworten aus (grau darstellen)
*/
.my-rating-style .ngs-matrix-question__row--selected .ngs-question__answer-selection:not(.ngs-question__answer-selection--selected),.ngs-question-rating .ngs-question__section--selected .ngs-question__answer-selection:not(.ngs-question__answer-selection--selected){
    opacity:.5;
    color:#dadada;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%)
}
.my-rating-style .ngs-matrix-question__row--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected),.ngs-question-rating .ngs-question__section--selected .ngs-question__answer-selection-button:not(.ngs-question__answer-selection-button--selected){
    opacity:.8;
    color:#dadada;
    background-color:#bebebe!important;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%)
}

```