Vaadin 7 UI Design By Example Beginner's Guide

Styling text fields

Text fields have the v-textfield CSS class. However, sometimes we need to do some tricks in order to accomplish our styling purposes. For example, if we want to make the text field have some rounded borders and a little icon inside the field, we could think of doing just this:

  
.v-textfield {
    border: 1px solid #4455aa;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background:#FFFFFF url("search.png") no-repeat 5px 2px;
    padding-left: 22px;
  }

That won't work when extending any of the default themes. The reason is that the themes are defining more specific rules for input elements. You can use Firebug or Chrome DevTools to inspect the element and see that the new rule is listed, but the theme selector ...