# Checkbox CSS (not list)

**URL:** <https://community.glideapps.com/t/checkbox-css-not-list/72212>\
**Category:** Ask for Help\
**Created:** [April 1, 2024, 11:29am UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212 "2024-04-01T11:29:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [April 1, 2024, 11:29am UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212/1 "2024-04-01T11:29:15Z")

</div>

I am wondering does anyone know how to style a checkbox, not in a list format.

So when checked, either the text colour changes or highlights it.

![Screenshot 2024-04-01 at 19-26-37 PSYCH ME · Glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/6893c7ba0f075a7229ff68ec425255f2cd12a69e.png)

This was achieved by this CSS code:

```auto
<pre><span><style>

[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: #f7b85c;
}

```

This is the checkbox in use but again it is not a list, its just a standalone single checkbox

![Screenshot 2024-04-01 at 19-27-02 PSYCH ME · Glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b4857a9bdc37029537414c8fdc2eac3c0c174df4.png)

TQ.

---

<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:** [April 2, 2024, 1:27am UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212/2 "2024-04-02T01:27:09Z")

</div>

```auto
div[class*="wire-container___StyledDiv2"] :has(div[kind="stroke"]) div[class*="wire-switch"] {
background-color: #f7b85c;
font-weight: 600;
}

```

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/618243b84d98b8c0e0c7f101f474fad56765a321.png)

Here are 2 checkboxes pointing to different columns.

If you want to highlight the checkbox as well:

```auto
div[class*="wire-container___StyledDiv2"]:has(div[kind="stroke"]) label[class*="wire-switch"] {
background-color: #f7b85c;
font-weight: 600;
}

```

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

---

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [April 2, 2024, 4:17am UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212/3 "2024-04-02T04:17:43Z")

</div>

Is this in Glide Pages? I was looking for something for Glide Classic Apps.

---

<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:** [April 2, 2024, 11:28pm UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212/4 "2024-04-02T23:28:05Z")

</div>

Ah yes, this is for the new version.

For Classic:

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

```auto
<pre><span><style>

[data-test="app-checkbox-list-item"]:has(rect[fill="currentColor"]) {
background-color: #f7b85c;
font-weight: 600;
}

</style></span></pre>
```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [April 9, 2024, 11:28pm UTC](https://community.glideapps.com/t/checkbox-css-not-list/72212/5 "2024-04-09T23:28:43Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.