# Exemple de notation CSS

Cet exemple montre comment personnaliser les réponses de [rating](https://docs.ngsurvey.com/fr/form-management/form-designer/questions/rating) question activée.

Cet exemple définit une classe CSS nommée **my-rating-style**. Vous pouvez définir cette nouvelle classe dans le [propriétés de la question](https://docs.ngsurvey.com/fr/form-management/form-designer/questions/question-properties) des questions qui doivent utiliser ce style. 

![](https://186103257-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)

Une fois que vous avez configuré la classe sur vos questions, le code suivant sera utilisé pour appliquer différentes couleurs en fonction de la valeur de notation (rating) de chaque réponse de question.

Les classes des réponses sont générées en utilisant le format suivant où answerratingvalue sera remplacé par la valeur de notation réelle définie du [propriétés de la réponse](https://docs.ngsurvey.com/fr/form-management/form-designer/answers/answer-properties):

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

Voici le code CSS complet qui générera différentes couleurs pour les boutons radio ou les cases à cocher en fonction des valeurs de notation des réponses. 

```css
/*
 Définit une bordure, une couleur de fond et une couleur de texte basées sur la notation de la réponse
*/

.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
}

/*
 Grisera les réponses de notation non sélectionnées
*/
.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%)
}

```