CSS: Choice component as a menu

1

2021-08-29 19.13.42

<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;
}
16 Likes
2

Do we use choice component normally for this?

3

Not sure what you’re asking…

4

@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

1 Like
5

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

1 Like
6

I mean in the past.

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

1 Like
7

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

Thanks for this Robert

1 Like
8

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
Screenshot 2021-08-30 at 09.49.351460Ă—1222 133 KB

1 Like
9

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

1 Like
10

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.

2 Likes
11

Fixed. Check the original post.

1 Like
12

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

Screenshot_20210830-075622-486
Screenshot_20210830-075622-4861080Ă—500 87.5 KB

10 Likes
13

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

14

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:

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

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…

2 Likes
16

Hey @ThinhDinh

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

17

image
image2166Ă—1234 188 KB 

<pre><span><style>

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

Here you go.

4 Likes
18

Thanks man!! I appreciate it!

1 Like
19

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.

20

HI Robert, does this work on Pages?