CSS: Rating Scale Inline List with Background Colors per Line

Ask for Help
1

Screen Shot 2021-12-08 at 8.18.34 AM
Screen Shot 2021-12-08 at 8.18.34 AM958Ă—782 64.6 KB

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

15 Likes
2

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

3

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
4

mine bg color not showing, why ?

5

I assume the class names have changed. Glide does not officially support CSS, and it can break anytime, so we don’t recommend using it going forward.

2 Likes