Skip to content
BASE DE CONNAISSANCE
  • Pages
    • Production
      • CSS
        • Etoiles css Version 1
        • icon picker
          Etoiles avec etiquettes
      • JAVASCRIPT
        • JS du style des étoiles avec etiquettes
        • Copie d'un texte dans le presse papier
        • CheckBox Avec question ouvert
      • HTML TEMPLATE
      • HOMAIR - Post-Stay - Summer 2024
        • css
        • js
      • tracking
      • Projects
      • Formulaire questionnaire
        • Historique de checking
      • CSM
      • Checklist Prod
      • Checklists
        • table_checklist_email
        • table_checklist_questionnaire
      • Clients
    • CSM
      • Tout type de questionnaire
        • NPS
        • Etoile
        • Choix unique
        • Choix multiple
        • Tableaux
        • Ouvert verbatims
        • Ouvert info. perso
BASE DE CONNAISSANCE
/
/
Etoiles avec etiquettes
Share
Explore

Etoiles avec etiquettes

error

Lien JS pour le fonctionnement du style

⁠
Lien du js des étoiles avec étiquettes
⁠
⁠
Ce style fonctionne avec 4 étoiles uniquement, mais vous pouvez rajouter autant que vous voulez!
/* Write your custom CSS here */

@media screen and (min-width:1024px)
{
.sg-question-options .sg-table
{
width: 10% !important;
}
}

.sg-survey .sg-mobile-optimized .sg-star-box.sg-5stars label:not(.sg-star-0),
.sg-star-box label
{
background: url('//widgixeu-library.s3.amazonaws.com/library/90008354/stars_enedis.png') -36px 0px no-repeat;
height: 25px;
width: 25px;
margin-right: 7px;
}

.sg-header-row-first
{ display: none; }

.sg-star-box label.sg-star-0, .sg-star-box label.sg-star-0:hover { display: none; }


.sg-survey .sg-mobile-optimized .sg-star-box label.sg-star-0
{
background: url(//widgixeu-library.s3.amazonaws.com/library/90008354/Stars_main.png) -20px -20px no-repeat;
height: 20px;
width: 20px;
position: relative;
top: 6px;
}
.sg-star-box label.sg-star-0
{
background: url(//widgixeu-library.s3.amazonaws.com/library/90008354/Stars_main.png) 0 -20px no-repeat;
height: 20px;
width: 20px;
position: relative;
top: 6px;
}

.sg-survey .sg-mobile-optimized .sg-star-box label:not(.sg-star-0):before
{
content: '';
}

/*La longueur du container des étoiles adéquates pour la distance de l'étiquette*/
.sg-5stars
{
width: 300px;
position: relative;
padding-bottom: 3px;
}


.sg-survey .sg-mobile-optimized .sg-star-box label.sg-star-on:not(.sg-star-0),
.sg-survey .sg-mobile-optimized .sg-star-box label:not(.sg-star-0):hover,
.sg-star-box label.sg-star-on,
.sg-star-box label:hover
{
background-position: 0px 0px;
}
.sg-star-box label.sg-star-0, .sg-star-box label.sg-star-0:hover
{
background-position: -20px -20px;
}

.sg-5stars .label-wrapper .left-arrow
{
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 12px 20px 12px 0;
border-color: transparent #0852AC transparent transparent;
position: absolute;
left: -20px;
top: 0;
}

.sg-5stars .label-wrapper
{
position: absolute;
right: 0;
background-color: #0852AC;
color: #FFFFFF;
padding: 3px 7px;
font-weight: normal;
font-size: 13px;
top: 1px;
padding-top: 4px;
height: 24px;
}

.sg-5stars .label-wrapper.not-satisfied
{
right: -0px;
}

.sg-5stars .label-wrapper.not-very-satisfied
{
right: 42px;
}

.sg-5stars .label-wrapper.quite_satisfied
{
right: 30px;
}

.sg-5stars .label-wrapper.very-satisfied
{
right: 40px;
}

.hideborder {
border: 0px;
}

Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.