# CSS: Rating Scale Inline List with Background Colors per Line

**URL:** https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682
**Category:** Ask for Help
**Tags:** custom-code
**Created:** [December 8, 2021, 1:20pm UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682 "2021-12-08T13:20:06Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [December 8, 2021, 1:20pm UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682/1 "2021-12-08T13:20:06Z")

</div>

![Screen Shot 2021-12-08 at 8.18.34 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a90e6660c8c092a5be432b6bf18845a0596f5b38.png)

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

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [December 8, 2021, 1:39pm UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682/2 "2021-12-08T13:39:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [December 8, 2021, 1:44pm UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682/3 "2021-12-08T13:44:33Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Martinus\_Goh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martinus_goh/32/53576_2.png) [@Martinus\_Goh](https://community.glideapps.com/u/Martinus_Goh)
#### Post date: [December 29, 2022, 2:31am UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682/4 "2022-12-29T02:31:56Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <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;
> }
> 
> ```

mine bg color not showing, why ?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [December 29, 2022, 8:53am UTC](https://community.glideapps.com/t/css-rating-scale-inline-list-with-background-colors-per-line/35682/5 "2022-12-29T08:53:22Z")

</div>

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.