NativeSelect styling not working!?


I’m trying to modify the styling of a NativeSelect widget like this:

In my component code I add a style name like:

... statusVal.addStyleName("status"); ... Next I add the following to my scss file:

.v-select-status {
background-color: red;

.v-select-select-status {
color: navy;
font-weight: bold;
[/code]However no color changes and no bold text are being observed in the rendering of the widget!


By the way I use Vaadin 7 in combination with FireFox 31.0 at the moment.


The first thing to check is the DOM with the browser debug tools: 1) does the style name get added to the element, 2) does the css get applied to the element.

If 1 is no, the you are running an old version of your app in the browser. If 2 is no, either your theme isn’t used (do other things in the theme work?), you have typoed a style name, or the browser is caching the old theme file. If both are yes, then style gets overridden by other CSS definitions.


Thanks for the reply! All my other theme settings work properly!

Well, I found out that the following is working:
. .v-select-status select.v-select-select { color: navy; font-weight: bold; } So,the style name (status) is only added to the .v-select element!


Yes, style names are only added for the component root div.