Option Select: dropdown list- design

Hi guys,

Sorry for my English

I have a question. In my project I have something like filter, where people can select: Category, Country and Year, so I have to use “Option Select”. But I would like to correct the design of dropdown list- right now in Blocsapp the text inside of dropdown list is too small, with small paddings (top&bottom).

How can I correct it? Should I make class like " .select-option .dropdown li "? I tried almost everything, but with no success. If there is no option, it could be considered to “Wish list” (together with table brics too).

Any ideas?
Thanks in advace.

Not sure on this without a URL to a page, but if I understand what you’re using for the options. You could try opening up class manager, add a class named:
.form-control
Then change the font in that class.

Hi,

Thank you for replying me!

I tried to make class " .form-control " - I put text to be RED, so I could see the difference. But red text/changes appeared on selected option -on the SelectOption button, but not inside the dropdown-list as I wanted.

I will be appreciated if you or somebody else could give me some ideas to solve the problem :slight_smile: Thanks in advance

OK, I thought you wanted to change the size. Try changing the font-size on .form-control class that works for me. The color appears to be set from a different point.

On your first dropdowns(beige), you are using a button drop down.
You have some custom CSS:

.dropdown-menu li a
This is working as the font is set to 15px (default is 14px).

Not sure what you want the button (with an anchor) or the drop-down (with an option), or color or font?

I tried to show my idea simplier in one img :slight_smile:

For me the class " .dropdown-menu li a " has no effect on menu-list in OptionSelect :worried:

Hope @Norm will help or just tell clearly is it possible at all?

Will be really thankful!

OK, This is what I have tried, and it seems to work:

First, add a dropdown

Next, select the list in the dropdown

Add a custom class to the list (example I’m using custom-list).

Now add the following in special class in the class manager:

.custom-list>li>a
Now Edit the new custom class, change padding top and bottom to 0 (or what you want).
Change the font to what you want and line spacing.

In this example, I set Line spacing to 21px, font size to 18, font to Droid Sans.

Important Preview In Browser to see Changes

Hope this helps

1 Like

It works perfectly for BUTTONS dropdown, but not for OptionSelect- these are different things. The same changes I want to make for list inside the OptionSelect - to make bigger font-size and increase line-height.

(As it’s shown on the image I posted before- by default the text inside the list of OptionSelect is black, small and almost with no line-height - this is what I want to change).

Really sorry for my English
Thank you for the effort to help me!

I’m away from my Mac until Monday (on my iPad). But I was able to change the font size (NOT color) using the class .form-control .

Previews need to be in the browser

If someone else hasn’t been able to help, or you haven’t been able to get it to work I’ll try to take a look on Monday.

Let us know if you’ve got it to work and how.

The option select is a native UI component rendered by the OS. It’s not possible to style them effectively across all browsers and OS’s. You may be able to change the font and the font style, but Im not aware of an effective way apply padding etc. If there is a way it will be hacking and most likely not work on all OS’s.

Oh :neutral_face:

Thank you for letting me know about that, so now I can calm down and accept the way it look like “OptionSelect-list”

1 Like