Page 1 of 1
SELECT object issue
Posted: Sat Mar 08, 2025 2:28 pm
by jPaul
Hi Everybody,
I'm using several SELECT objects in a form. There are two classes involved, select and select:focus.
The issue is that (when in focus) the SELECT objects will ignore the selector declarations for Border Color, Border Radius, Border Style, Border Width.
What have I missed, or is this behaviour not manageable?
Re: SELECT object issue
Posted: Sat Mar 08, 2025 3:37 pm
by Pablo
If you need help then please provide a DEMO project, otherwise it will be impossible to guess what you have done.
Re: SELECT object issue
Posted: Sun Mar 09, 2025 2:03 pm
by jPaul
Hi Pablo,
I've attached a demo project:
https://www.dropbox.com/scl/fi/xjypxsp0 ... s605&raw=1
You can see that the drop-down list provided by the SELECT statement ignores the declarations for
Border Color,
Border Radius,
Border Style,
Border Width and
Box Shadow.
There is a style associated with Select:focus, but that doesn't seem to extend to the drop-down list provided.
Since I have several SELECT options planned, I would hope to manage this detail from the Style Manager. I want to avoid having to sprinkle javascript all over the place.
Re: SELECT object issue
Posted: Sun Mar 09, 2025 2:21 pm
by Pablo
As far as I know, it is not possible to style the dropdown menu via CSS.
Note that this is not specific to WWB.
It can only be done if you reproduce the select element yourself with JavaScript.
For example, like it is done in the 'dropdown list' object.
Re: SELECT object issue
Posted: Sun Mar 09, 2025 3:15 pm
by BaconFries
You can do it like the following but it may not be cross browser compatible see the url or alternativly you can use the Listview object in 'drop list' mode.
Code: Select all
<style>
select option
{
background: red;
}
</style>
Code: Select all
<style>
select{
background-color: green;
}
option{
color: yellow;
}
</style>
See Styling with CSS
https://developer.mozilla.org/en-US/doc ... g_with_css
bootstrap-select
https://developer.snapappointments.com/ ... /examples/