# Styling checkbox list

**URL:** <https://community.glideapps.com/t/styling-checkbox-list/45128>\
**Category:** Ask for Help\
**Created:** [July 24, 2022, 5:56am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128 "2022-07-24T05:56:40Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [July 24, 2022, 5:56am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/1 "2022-07-24T05:56:40Z")

</div>

Hi,  
is it possible to style items in an inline checkbox-list, depending on “checked” or “not checked”?  
I tried with an if-then-else column to style with HTML, but I can’t add an Rich Text to the list.

Adding a Rich Text component (for testing), then the color is correct.

Wim

 ![2022-07-24_075906](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c26969fe62bdba1c407a4f01ca5056bc1b05f9d0.png)

 ![2022-07-24_075606](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/0/40a2a0efd298b9d4620e20eb37bec348f4b94997.png)

---

<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:** [July 24, 2022, 12:44pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/2 "2022-07-24T12:44:31Z")

</div>

I believe you can only style the checkbox itself, not the text that goes with it.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 24, 2022, 12:45pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/3 "2022-07-24T12:45:52Z")

</div>

yes, use CSS selected child number in the template

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [July 24, 2022, 6:41pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/4 "2022-07-24T18:41:25Z")

</div>

Thanks for your reply, but can you explain it a little bit more please.

- I don’t know how much items there will be, so it’s difficult to set a “selected child number”
- the color depends on the status of the boolean (checked/unchecked), not on the position of the item.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 24, 2022, 6:44pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/5 "2022-07-24T18:44:02Z")

</div>

Yes… that’s why, i suggest using a template column to create css code, you can replace child number based on if else column, that will check if is true…  
Generate a row number first… so you know which child to target

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [July 24, 2022, 7:36pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/6 "2022-07-24T19:36:24Z")

</div>

Before you spend a lot of time on a complicated CSS, give this post a read.

> [@warning Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks](https://community.glideapps.com/t/unsupported-html-css-in-the-rich-text-component-will-completely-break-in-the-coming-weeks/43931):
>
> Some advanced users use custom HTML/CSS inside the Rich Text component to style their apps. This has always been unsupported and discouraged: In the coming weeks we’re rolling out significant changes to Glide’s architecture to make apps faster, and eventually more compatible with new features introduced in Glide Pages. This will completely break all custom HTML/CSS in the Rich Text components. If you rely on this, we strongly encourage you to stop using i…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 24, 2022, 8:07pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/7 "2022-07-24T20:07:31Z")

</div>

It will take me 5 min to fixed lol

---

<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:** [July 25, 2022, 12:49am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/8 "2022-07-25T00:49:38Z")

</div>

I crafted a quick app to dive into Uzo’s idea above.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43193fd2a5513e594a835126e4676d9228c47ec0.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/d/dd77701291a5c992c86c8b0a9f45542421c96c5e.png)

Basically, we do the things below:

- Craft out an index for each row, and add 1 to it so we can have the nth-index to use in CSS.

- Use an If-Then-Else - template column combo to generate a CSS snippet for each row.

- Combine them all in a joined list column, and add a `<pre><span><style>` tag to round it off.

Feel free to copy it back here.

> **[Checkbox - Text Color Based on Check Value Concept](https://checkbox-text-color--9km4.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 25, 2022, 5:11am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/9 "2022-07-25T05:11:42Z")

</div>

you can apply that technique to any list…

 ![Screen Shot 2022-07-25 at 7.13.18 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb64f15585f24e556c4ada4a41a3e099d6075b46.jpeg)

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [July 25, 2022, 5:51am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/10 "2022-07-25T05:51:41Z")

</div>

To Uzo and ThinhDinh : WOOOOWWW. 👏

Thanks both !!

@ThinhDinh I’m trying to copy the Things table to my app, but for the index-column I need a URL for the experimental code. I searched this forum, but couldn’t find it.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 25, 2022, 6:17am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/11 "2022-07-25T06:17:27Z")

</div>

you don’t need code’:

> [@RowID is great. Could REALLY use Row Number](https://community.glideapps.com/t/rowid-is-great-could-really-use-row-number/16834/13):
>
> RowID column Lookup to gather all rowIDs as an array Find Element Index column… Should I continue?) [image]

---

<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:** [July 25, 2022, 8:39am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/12 "2022-07-25T08:39:19Z")

</div>

As Uzo said above, it’s 3 columns:

- RowID
- Lookup to return all rowIDs
- Find Element Index

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [July 25, 2022, 9:38am UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/13 "2022-07-25T09:38:27Z")

</div>

actually 4… he needs to add 1 to the index 😉

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [July 25, 2022, 1:00pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/14 "2022-07-25T13:00:48Z")

</div>

Hi,  
Is this technique also possible when grouping records? In my app, it doesn’t work and I think it’s because the index doesn’t match the (un-)checked record(s) anymore.

If the solution is too complex, just ignore my question 😉

---

<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:** [July 25, 2022, 3:09pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/15 "2022-07-25T15:09:13Z")

</div>

The solution above only applies for a simple inline list, with no sorting (earliest to latest).

With grouping, you have to take into account where the item will land in each group, and where each group is on the screen, and that’s super complex.

---

<div class="post-metadata">

**Author:** ![Wim\_De\_Coninck](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wim_de_coninck/32/28179_2.png) [@Wim\_De\_Coninck](https://community.glideapps.com/u/Wim_De_Coninck)\
**Post date:** [July 25, 2022, 6:27pm UTC](https://community.glideapps.com/t/styling-checkbox-list/45128/16 "2022-07-25T18:27:28Z")

</div>

That was also what I thought.  
Never mind; thanks for the first help and the quick app !!