# 🙈 CSS to hide any list UNTIL you search!

**URL:** <https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636>\
**Category:** Community Resources\
**Created:** [December 5, 2025, 2:01am UTC](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636 "2025-12-05T02:01:16Z")\
**Posts on this page:** 4\
**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 5, 2025, 2:01am UTC](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636/1 "2025-12-05T02:01:17Z")

</div>

I’ve always wanted the ability to only display list items when the user is actively searching for something.

Without CSS, the only way to do this will be to use a user specific text column, followed by a query, and then displaying a list with that query as the source.

However, with custom CSS, you can use the `:has(.is-searching-something)` pseudo class with some visibility styling on any type of collection to provide the same experience without any additional data columns!

### Steps:

1. Create a collection and give it a custom class (eg. `listSearch`)
2. Add this CSS in Settings → Appearance  
_ **Note** : I’m targeting a Table Collection, so I’m using the `[class*=”new-table-lib”]` class. Other Collection types will have a different class to target._

```auto
.listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
    display: none;
}

```

> **v2**
>
> ❌`visibility:hidden` style still retains component height even though there’s hidden content.
> 
> ```auto
> .listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
> visibility: hidden;
> }
> 
> ```

> **v1**
>
> ❌ Can be combined into a singular CSS block using the `:not(:has())` pseudo class.
> 
> ```auto
> .listSearch [class*="new-table-lib"] {
> visibility: hidden;
> }
> 
> .listSearch:has(.is-searching-something) [class*="new-table-lib"] {
> visibility: visible;
> }
> 
> ```
> 
> [🙈 CSS to hide any list UNTIL you search! - #2 by Himaladin](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636/2)

Take a look at the video below for the end effect!

https://www.loom.com/embed/67a6299c020c4fe4804e7b5cb473ac3c

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 5, 2025, 3:26am UTC](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636/2 "2025-12-05T03:26:28Z")

</div>

Why not try using just one CSS block, like this?

```auto
.listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
    visibility: hidden;
}

```

---

<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 5, 2025, 4:58am UTC](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636/3 "2025-12-05T04:58:42Z")

</div>

Brilliant!

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [December 5, 2025, 5:04am UTC](https://community.glideapps.com/t/css-to-hide-any-list-until-you-search/85636/4 "2025-12-05T05:04:06Z")

</div>

Love the way you guys work to make Glide better! 👏 👏