Select when using Drop-Down option does note respect Style

Issues related to previewing and publishing your web site.
Post Reply
VEDRAN
 
 
Posts: 89
Joined: Tue Feb 09, 2021 9:54 am
Contact:

Select when using Drop-Down option does note respect Style

Post by VEDRAN »

Hi
Object "Select" when using Drop-Down option does note respect Style. If my page is black or just dark, when I create "Select" and set it in General - Type - Drop-Down, it will not respect it's style. So if my page is black or just using some dark color, I have to use bright color for text. But then, when clicked on Select (drop-down) I can't see what it says in there. The background color of the Drop-Down becomes white, and as the text is also light color (the color i used is respected here for text), you can't see the text.
Can you check please?

DEMO:

Code: Select all

https://gofile.io/d/O4Bl7T
Thanks
User avatar
Pablo
 
Posts: 24141
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Select when using Drop-Down option does note respect Style

Post by Pablo »

In HTML you cannot style the drop down section of the select menu. This style is controlled by the browser.

This is unrelated to WWB.

From the HTML specs:
You can’t fully style the <option> tag because <select> dropdowns are native OS controls, not fully rendered by HTML/CSS. Browsers hand them off to the operating system for consistency, accessibility, and security, so most CSS (like padding,
borders, hover effects) is ignored. Only limited styles may work, and results vary by browser.
User avatar
BaconFries
 
 
Posts: 6211
Joined: Thu Aug 16, 2007 7:32 pm

Re: Select when using Drop-Down option does note respect Style

Post by BaconFries »

Just as Pablos reply this is unrelated to WWB but entirely of the "Browser" and the "OS" (Operating System). So what may work in one "Browser" it will be ignored in another(s).

You can try doing it with 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.
Insert either in Page HTML Between the <head></head> tags*

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/
Post Reply