O'Reilly logo

jQuery UI Themes Beginner's Guide by Adam Boduch

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

Time for action - changing widget form fields

It's time to add a form element to our sample container and adjust the font settings:

  1. Open the index.html file created earlier and replace the content with the following:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Working With Widget Containers</title>
    <link href="http://jqueryui/development- bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    </head>
    <body style="font-size: 100%;">
    <div class="ui-widget">
    <label>Type Something:</label>
    <input type="text"/>
    </div>
    </body>
    </html>
    
  2. In the jqueryui/development-bundle/themes/base directory, edit the jquery.ui.theme.css file.
  3. Locate the .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button style definition ...

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