NativeSelect styling not working!?

Flow
1

Hi,

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:

[code]
.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!

Why?

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

Regards,
Gerard

2

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.

3

Hi,

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!

Regards,
Gerard

4

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