CSS: Choice component as a menu

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

Do we use choice component normally for this?

Not sure what you’re asking…

@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

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

1 Like

I mean in the past.

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

1 Like

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

Thanks for this Robert

1 Like

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!

1 Like

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

1 Like

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

Fixed. Check the original post.

1 Like

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

10 Likes

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

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

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

Hey @ThinhDinh

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

<pre><span><style>

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

Here you go.

4 Likes

Thanks man!! I appreciate it!

1 Like

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.