Support » Theme: GeneratePress » How modify “select dropdown” list CSS

  • Resolved John

    (@allonlinetools)


    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 7 months ago by John.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter John

    (@allonlinetools)

    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.

    Elvin

    (@ejcabquina)

    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 John

    (@allonlinetools)

    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)

    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 John

    (@allonlinetools)

    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 7 months ago by John.
    Elvin

    (@ejcabquina)

    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.