It's time to add a form element to our sample container and adjust the font settings:
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="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>
In the
jqueryui/development-bundle/themes/base
directory, edit thejquery.ui.theme.css
file.Locate the
.ui-widget input
,.ui-widget select
,.ui-widget textarea
,.ui-widget button
style definition and replace it with the following:.ui-widget input, .ui-widget select, .ui-widget textarea...