How modify “select dropdown” list CSS

Resolved AllOnlineTools
(@allonlinetools)

4 years, 12 months ago
I want to set the maximum height for my dropdown list. I used the CSS
select { border-radius: 3px; border: 0.5px solid #343a40; min-height: 1.25rem; max-height: 1.75rem; color: #343a40;}
but when I apply this it doesn’t show the selected field. Show white space. How can I modify the full code properly?
- This topic was modified 4 years, 12 months ago by AllOnlineTools.
The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter AllOnlineTools
(@allonlinetools)

4 years, 12 months ago
Please check the demo from here: [ redundant link removed ]
It showing me the blank select though it can calculate the result. But I need to show that which one is selected.
- This reply was modified 4 years, 11 months ago by Jan Dembowski.
Elvin
(@ejcabquina)

4 years, 12 months ago

Hi there,

I’m not sure I understand what’s the result you aim for.

Can you provide any mockup image of how you want it to display?

Perhaps this is what you’re aiming for?
https://www.w3schools.com/tags/att_select_size.asp

Let us know.

Thread Starter AllOnlineTools
(@allonlinetools)

4 years, 12 months ago

Thanks, @ejcabquina for replying.
Before using the custom CSS it looks like this view:
https://snipboard.io/FMAYke.jpg

After adding the above CSS it looks like the below view (I mean it couldn’t show the selected option value):
https://snipboard.io/od3m4M.jpg

So, I need to modify the field height and also need to show the selected value name. Now how can I do this?

Elvin
(@ejcabquina)

4 years, 12 months ago

Ah I see.

You’re aiming to do this? https://share.getcloudapp.com/mXupbZqB

If so, the issue is with the padding. It’s making the space too narrow for the dropdown item. That said, let’s adjust this.

Try this modification of your CSS.

select { border-radius: 3px; border: 0.5px solid #343a40; min-height: 1.25rem; max-height: 1.75rem; color: #343a40; padding: 0 10px; }

I basically added padding: 0 10px;
Thread Starter AllOnlineTools
(@allonlinetools)

4 years, 12 months ago
Many many thanks @ejcabquina now it’s working.
I just changed it with padding: 1px 1px; now it’s working fine.
- This reply was modified 4 years, 12 months ago by AllOnlineTools.
Elvin
(@ejcabquina)

4 years, 12 months ago

Nice one. No problem. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How modify “select dropdown” list CSS’ is closed to new replies.

Tags