CSS label style Vaadin

Question

I'm trying to make inline editing in Vaadin. I think that good way to achieve that is styling text fields to make them look like labels, and switch to style of text field when focused.

Is it possible to style text field to look like label? How can I make it if it's possible?

Solution 1

You can override the Vaadin styles in your own theme. If you don't have a theme yet, create a directory under the VAADIN dir called themes and create a subdirectory in themes by the name of your theme, eg. mytheme.

Vaadin 6:

1. Call setTheme("mytheme") in your application class
2. Call myTextField.setStyleName("labelstyle"); in your code
3. Create styles.css in your new theme directory.
4. Add the following in styles.css:

styles.css:

 @import "../reindeer/styles.css";

 .v-textfield-labelstyle {
     background: none repeat scroll 0 0 #F5F5F5;
     border-color: #F5F5F5;
     border-image: none;
     border-left: 1px solid #F5F5F5;
     border-radius: 3px 3px 3px 3px;
     border-right: 1px solid #F5F5F5;
     border-style: solid;
     border-width: 1px;
 }

Vaadin 7:

1. Add @Theme("mytheme") annotation in your UI class
2. Call myTextField.setStyleName("labelstyle"); in your code
3. Create styles.scss in your new theme directory.
4. Add the following in styles.scss

styles.css:

 @import "../reindeer/reindeer.scss";

 .mytheme {
    @include reindeer;

    .v-textfield-labelstyle {
        background: none repeat scroll 0 0 #F5F5F5;
        border-color: #F5F5F5;
        border-image: none;
        border-left: 1px solid #F5F5F5;
        border-radius: 3px 3px 3px 3px;
        border-right: 1px solid #F5F5F5;
        border-style: solid;
        border-width: 1px;
    }
}

1. Compile your theme by calling java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css in your theme directory

This little trick will give you a Label-like TextField which turns into a normal TextField when focused.

Note that this will only work when using Reindeer theme and the default background color #F5F5F5. You'll have to tweak it a bit if you are using some other theme or the background color differs from the original.

Solution 2

Text field is represented by this HTML:

<input type="text" class="v-textfield v-widget" tabindex="0" style="">

What about applying this: How to remove border (outline) around text/input boxes? (Chrome) on "v-textfield v-widget" CSS?