JavaFX 2.2 WebEngine HTML Select Dropdown Styling

Question

I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).

Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?

List of techniques I have tried:

• http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
• http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
• http://www.scribbletribe.com/how-to-style-the-select-dropdown/
• http://cssdeck.com/labs/styling-select-box-with-css3
• http://bavotasan.com/2011/style-select-box-using-only-css/
• http://www.htmllion.com/default-select-dropdown-style-just-css.html
• http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

Answer 1

I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post

Answer 2

I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome

This is how select element is rendered in ubuntu jar file

I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.

Mine working solution is to use plane js library as tom-select, no dependencies. And here how select element is rendered in chrome and in jar. Success :)