CSS: Rating Scale Inline List with Background Colors per Line

<pre><span><style>
*.selected-item-list-item-1{
background-color: #ff7272;
}
*.selected-item-list-item-2 {
background-color: #ffbf00;
}
*.selected-item-list-item-3 {
background-color: #5ec470;
}
*.selected-item-list-item-4 {
background-color: #5ecdf2;
}
*.selected-item-list-item-5 {
background-color: lightgray;
}

[data-test="list-item-emoji"] {
width: 60px !important;
margin-top:-30px;
}

[data-test="list-item"] {
min-height: 4rem;
}

[data-test="list-item-subtitle"],[data-test="list-item-title"] {
font-weight: 600 !important;
margin-right: 10px !important;
font-size: 18px !important;
color: white !important;
line-height: 25px !important;
font-family: Poppins, BlinkMacSystemFont, Roboto, sans-serif !important;
}

This CSS above was manually created, but I bet you could make the items dynamic by creating a “row number” column and using it within a template column to populate the *.selected-item-list-item-ROWNUMBER {...} style and then joining them with a join text column.

12 Likes

Neat! Thanks for sharing Bob. Is this purely for demonstration purposes or does it do something when you click on the items?

Mine is purely visual (action set to none), but it could certainly be configured with an action to select the proper rating inside of “custom form”.

1 Like