How to style Browser's HTML Dropdown List using Linux GTK+ 2.0 themes
 

I have been exploring gtk+ themes present in /usr/share/themes to style up different components in applications.

I experimented on Crux theme by changing some properties in gtkrc file at this path /usr/share/themes/Crux/gtk-2.0.

Here are the changes that I made:
style "crux-menuitem-text-is-fg-color-workaround"
{
text[NORMAL] = @fg_color
text[PRELIGHT] = @selected_fg_color
text[SELECTED] = @selected_fg_color
text[ACTIVE] = @fg_color
text[INSENSITIVE] = darker (@bg_color)
xthickness = 14
ythickness = 14
}
widget "*.gtk-combobox-popup-menu.*" style "crux-menuitem-text-is-fg-color-workaround"

Added xthickness and ythickness to add space around every item in the dropdown list. Here *.gtk-combobox-popup-menu.* matches dropdown list that opens when a combobox is clicked/tocuhed.

This successfully matches dropdown lists in Windowed applications like Character Map, Power Management or any application containing a combobox and increases space. However, the same is not true for the HTML Select control's dropdown list that opens in an HTML page of a browser. It seems that the widget name doesn't match.

So is there a way to point to the dropdown list in an HTML page of a browser and style it up.

I know that styling of dropdown list is not possible using HTML-CSS so wanted to check at the OS level.

Please let me know if this is feasible using gtk+ themes and if not, which layer in OS should be modified to apply styles that goes inside the browser to style it up, any other alternate or even to say with reasoning that it is not possible at all.

Here is the output of "uname -a" command
Linux <mac address> 2.6.32-358.11.1.el6.x86_64 #1 SMP Tue Jun 11 17:23:30 CDT 2013 x86_64 x86_64 x86_64 GNU/Linux

Linux distribution is 64 bit and I think it is based on Fedora/Red Hat.

It's not possible at all.

i would say it's up to the html rendering engine, e.g. webkitgtk or webkitgtk2. wich one is your browser compiled with? are you sure it's using gtk2 and not gtk3?
if it uses gtk2, you might be right about having modified the wrong widget.
but it could also be that the engine uses the gtk themes only in a very approximate manner, making changes as needed...

maybe with some modern browser you can give direct commands to the engine via CSS, like "webkit-dropdown-menu-margin: 14px;"? (i just made that up)

Thank you for the replies.

I am using two options to see the output of an HTML application.
1. Google Chrome
2. QT WebView - Ultimately this is required.

Both are webkit based but I am not sure of their connection with gtk.

I have tried with a number of browsers but the appearance of dropdown remains almost same except for some font styling which is inconsistent among them.

I don't think browsers provide any vendor specific command to increase the gap based on the observation that if Google Chrome - Webkit had been providing this command, Google for sure would have increased the gaps in many of its dropdown lists of Gmail settings to provide a very comfortable spacing for their end users.

In many such requirements, often projects are web based where developers are looking for consistent appearance across browsers and client machines and due to insufficient control over dropdown list, they have to adopt Javascript based equivalent dropdown lists. Ours is a machine specific software application and can explore if there are machine specific solutions too, if any.

Though this seems impossible but inquisitive to know that why different OS and browsers will not or cannot provide any mean to change this.

The best you can do is detect the client's OS and then serve up a "machine specific" stylesheet.

Dropdown lists in browsers are not GTK widgets.