O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required