How to style choice dropdowns with CSS?

Ask for Help
1

Hi, I’m trying to make dropdown border in Glide match the CSS shown in the below picture, created by @tuzin in this link. I’m having difficulty finding out how to apply CSS to this. Could someone kindly help me out? It would be greatly appreciated

image

Custom class for choice component shown in picture: library-view

CSS:

.library-view ul {
border-style: none;
}

.library-view li {
border-width: 0px;
}

.library-view li.selected, .library-view:not(:has(.selected)) li:first-child {
font-weight: 700;
background: none;
border-radius: 0px;
border-bottom: 2px solid var(--gv-text-contextual-accent);
color: var(--gv-text-contextual-accent);
}

For clarification, I’m trying to change the final look of the dropdown box after we’ve made a selection, not the look of the dropdown box itself (which is by default white, and is better that way). I was able to make it transparent, but it applied to all dropdowns. The final box is transparent, but the dropdown list itself is as before, which is what I’d like:

image

2

So you want to change the look of a dropdown, not the “pills” version that seems to have been used in the example?

3

I would like to change this part only. I noticed that it has multiple states (selected, highlighted, not selected), when I tried changing it on my end.

image

4

Try using !important to override defaults:

select {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    font-size: 16px !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

.select-class-name {
    background-color: #e0e0e0 !important;
    border: 2px solid #ccc !important;
}

Inspect elements in the browser to find the right classes or IDs.

5

@Jarvis, what style do you want for that component?

I need to inform you that previously this component had an empty state when not selected, but it no longer has this in its HTML structure. Therefore, before proceeding, I need to confirm a few alternative conditions with you first:

  1. Are you using the “required” option for this component?
  2. Are you using images for all your choice items?
  3. If neither of the above applies, you will need another component to initialize whether the choice state is empty or not through its visibility settings.
2 Likes
6

I wanted to style it so that whether it’s highlighted, selected or inactive, it will all look like the tabbed menu with a blue-bottom border.

After giving it another though, I feel it’s best to leave it as it is, or turn it into a choice component. Might not be worth the hassle :stuck_out_tongue:

1 Like