CSS styling of selected table cells

Please see the attached picture.

I’ve used the CellStyleGenerator and the FieldFactory to put a CSS-styled textfield in my table.
This is my CSS:

    border-color: #365979 !important;
    background: rgba(0, 0, 50)!important;
    background: rgba(0, 0, 50, .1)!important;
    color: #0C4C88 !important;

What CSS-name do I have to use when I want to set the color of the text when the cell is selected?



Hi Fred Fred,

I must recommend using Firebug to you. Modern IE and Chrome does support this feature too. Just inspect the generated DOM and look at the css classes given by vaadin. That way you can easily style nearly everthying you want to. You will understand the patterns of css classes from vaadin very fast because they are well designed.

You will find a nice tutorial about styling here


thanks for the response. Though I have been looking at firebug already… the CSS classes are .v-table-row / v-selected / v-table-cell-content. But I don’t know how to translate that information into a CSS style rule.

    .v-table-row v-selected v-table-cell-content-oldcell {
    color: white !important;    

I’ve tried that but it won’t work.
I also looked into this thread https://vaadin.com/forum/#!/thread/491411 , but as I’m using textfields in the table the following doesn’t work either:

    .v-table-row v-selected v-table-cell-content-oldcell v-table-cell-wrapper{
    color: white !important;    

Any idea? (Other than, look at firebug… I’ve tried that)