How to style the options in a Select widget?

[UlrichGoebel]

As I asked in #4304 for Buttons I want to build single line Select widgets. It seems that the options themselves has border, padding or even other properties, but I don't find a way to configure them.

My little code snipped inside a compose:

choices = (
    ('Choice One', 'c1'),
    ('Choice Two', 'c2'),
    ('Choice Three', 'c3'),
)
yield Select(choices, allow_blank=True, prompt='make your choice')

That makes a three-line widget, even if I set the border to none, and so on. Even an additional border is shown if I set border: red for the Select widget. That's why I suppose that the options themselve have border or margin or something else.

A detail could be: how to style the promt in case of no selection?

Any help is very welcome.

[TomJGooding]

Does this answer in a similar discussion help? #4061 (comment)

[UlrichGoebel]

That solves my question. Thank's a lot!

[UlrichGoebel]

Thank's to GomjGooding, the discussion #4061 solves the question.

As a beginner I am proud (😉) to found how to restrict these settings to a specific Select. That could be done by CSS using child combinators.

Let's assume we have a Select with id='onelineselect' where we want to eliminate the border to get a one-line-Select. Then we could make a CSS file with the snippet:

#onelineselect > SelectCurrent, #onelineselect > SelectCurrent:focus {
    border: none;
    }

Then as the python code snippet we could have:

choices = (('A', 'a'), ('B', 'b'))
yield Select(choices, id='onelineselect', allow_blank=True, prompt='make your Choice')

Of course the allow_blank and promt=... are optional and are intended to demonstrate that even the prompt for the blank selection is covered to be one-line.