# CSS Choice Component Drop Down

**URL:** <https://community.glideapps.com/t/css-choice-component-drop-down/75396>\
**Category:** Ask for Help\
**Created:** [August 3, 2024, 10:44am UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396 "2024-08-03T10:44:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vras\_dinand](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vras_dinand/32/64071_2.png) [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)\
**Post date:** [August 3, 2024, 10:44am UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/1 "2024-08-03T10:44:32Z")

</div>

for Choice Component Drop Down For non active or empty add border box and text required…  
How To modify with CSS?

---

<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:** [August 3, 2024, 2:47pm UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/2 "2024-08-03T14:47:25Z")

</div>

@vras_dinand, unfortunately, the dropdown component does not have an empty state. Are you using images for the list of options? If not, alternatively, it might need a hint component as an aid.

---

<div class="post-metadata">

**Author:** ![vras\_dinand](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vras_dinand/32/64071_2.png) [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)\
**Post date:** [August 3, 2024, 3:00pm UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/3 "2024-08-03T15:00:07Z")

</div>

Can you spill for example… idont understand this…

---

<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:** [August 3, 2024, 3:01pm UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/4 "2024-08-03T15:01:44Z")

</div>

Kamu menggunakan gambar tidak dalam daftar pilihannya?

---

<div class="post-metadata">

**Author:** ![vras\_dinand](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vras_dinand/32/64071_2.png) [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)\
**Post date:** [August 22, 2024, 4:00am UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/5 "2024-08-22T04:00:45Z")

</div>

tidak mass

---

<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:** [August 22, 2024, 10:28am UTC](https://community.glideapps.com/t/css-choice-component-drop-down/75396/6 "2024-08-22T10:28:20Z")

</div>

If you don’t have both (required or image as an alternative) then there is no solution, unless you add another component that can appear as a CSS trigger.

The code below only works if “required” is turned on.

```auto
/*Dropdown - "Required" must be on*/
.choiceComp button[data-state="closed"]:not(:has(.has-selection)) {
border: 1px solid red;
}

```