# CSS: Choice component as a menu

**URL:** https://community.glideapps.com/t/css-choice-component-as-a-menu/31118
**Category:** Ask for Help
**Created:** [August 29, 2021, 11:14pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118 "2021-08-29T23:14:52Z")
**Posts on this page:** 20
**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: [August 29, 2021, 11:14pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/1 "2021-08-29T23:14:52Z")

</div>

![2021-08-29 19.13.42](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/7/4795ec1e3b3802f364bd2bd9eb0982a0742cf3e5.gif)

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

[data-test="app-inline-picker"] {
background: none;
}

[data-test="app-inline-picker"] .current {
background-color: transparent;
border-bottom: red solid 4px;
margin-bottom: -4px;
border-radius: 0px;
box-shadow: none !important;
}

```

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [August 30, 2021, 12:28am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/2 "2021-08-30T00:28:37Z")

</div>

Do we use choice component normally for this?

---

<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: [August 30, 2021, 12:30am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/3 "2021-08-30T00:30:44Z")

</div>

Not sure what you’re asking…

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [August 30, 2021, 12:34am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/4 "2021-08-30T00:34:46Z")

</div>

@Robert_Petitto

I think you posted a CSS code to have a button inside a picture but I can’t find it. Do you have it at hand?

Thanks

---

<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: [August 30, 2021, 12:36am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/5 "2021-08-30T00:36:22Z")

</div>

I posted a CSS code to make a choice component look like a top navigation menu…can you not see it?

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [August 30, 2021, 12:39am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/6 "2021-08-30T00:39:49Z")

</div>

I mean in the past.

I can see this one but I was referring to another one.

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [August 30, 2021, 12:39am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/7 "2021-08-30T00:39:50Z")

</div>

That’s what I asked. Which comments the css was modifying.

Thanks for this Robert

---

<div class="post-metadata">

### Author: ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)
#### Post date: [August 30, 2021, 7:50am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/8 "2021-08-30T07:50:57Z")

</div>

Thanks, @Robert_Petitto - this was exactly what I was looking for to make my welcome screen more user-accessible and friendly.

I was wondering - is there any way of getting rid of the border? You can see that the item selected has the underline… and a border around the side and top.

Thanks!

 ![Screenshot 2021-08-30 at 09.49.35](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4c7745c1771d01fc050421d2d262afc6c932aba9.jpeg)

---

<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: [August 30, 2021, 9:05am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/9 "2021-08-30T09:05:04Z")

</div>

So you only want the underline and not the other sides’ borders?

---

<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: [August 30, 2021, 10:21am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/10 "2021-08-30T10:21:08Z")

</div>

Good catch…I built the CSS in dark mode without my glasses on and didn’t see that faint shadow…I’ll take a look today.

---

<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: [August 30, 2021, 11:58am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/11 "2021-08-30T11:58:43Z")

</div>

Fixed. Check the original post.

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [August 30, 2021, 12:58pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/12 "2021-08-30T12:58:10Z")

</div>

Went for a bit of a hybrid solution. I think I like it.

 ![Screenshot_20210830-075622-486](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/9/f903ef8ffe7b9b3bc121fb4383193cc3b07dfa1a.png)

---

<div class="post-metadata">

### Author: ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)
#### Post date: [August 30, 2021, 1:08pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/13 "2021-08-30T13:08:01Z")

</div>

Is the CSS code the same or different to that shared by @Robert_Petitto

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [August 30, 2021, 1:11pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/14 "2021-08-30T13:11:23Z")

</div>

It’s based off of his. I just stripped it down and changed a couple things. The only thing I’m modifying is the current selected item. The rest is the default choice design.

This is what I used:

```auto
[data-test="app-inline-picker"] .current {
background-color: #29577A33;
border-bottom: #29577A solid 4px;
border-radius: 0px;
}

```

---

<div class="post-metadata">

### Author: ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)
#### Post date: [August 30, 2021, 1:13pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/15 "2021-08-30T13:13:05Z")

</div>

Super… Thanks.

This is so necessary with the change to the choice components lately.  
It’s sometimes difficult to see if an option is chosen or not…

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [November 29, 2021, 10:43pm UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/16 "2021-11-29T22:43:50Z")

</div>

Hey @ThinhDinh

Do you have any CSS to change the color of the selected value in the choice component Chips style?

---

<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: [November 30, 2021, 12:06am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/17 "2021-11-30T00:06:31Z")

</div>

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

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

.current .display-item {
background-color: #006400 !important;
}

```

Here you go.

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [November 30, 2021, 12:11am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/18 "2021-11-30T00:11:11Z")

</div>

Thanks man!! I appreciate it!

---

<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 27, 2022, 6:04am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/19 "2022-07-27T06:04:44Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> .current .display-item {
> background-color: #006400 !important;
> }
> 
> ```

Hi,  
is it also possible with CSS to change the whole layout of the Chips Style (border radius, background-color, text-color, height, font-size,…)  
I like the inline-picker style above, but I don’t want the “-” and I want to select multiple items

And for later purposes: how to change the font, font-size and font-color in the inline-picker for both “normal” status and “clicked” status.

---

<div class="post-metadata">

### Author: ![IlseB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ilseb/32/44063_2.png) [@IlseB](https://community.glideapps.com/u/IlseB)
#### Post date: [February 21, 2023, 9:06am UTC](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118/20 "2023-02-21T09:06:08Z")

</div>

HI Robert, does this work on Pages?

[Next page](https://community.glideapps.com/t/css-choice-component-as-a-menu/31118.md?page=2)