Applying JQuery UI css to a textarea element

Question

Hi. I'm using JQuery UI for a web based development at the University. I got some forms that I put into a dialog, so I got elements like

<label for="name">ID user</label><input type="text" name="iduser" size="15" id="iduser" class="text ui-widget-content ui-corner-all" maxlength=12  />

But I got some textarea elements like

<label for="name">Description</label><textarea name="description" id="description" class="text ui-widget-content ui-corner-all" value=""></textarea>

The issue: textarea is not taking the css as inputs does, I mean, I got corner rounder textarea as input texts but the font size and font family don't.

Answer 1

look for an extra style overriding the style of jquery UI with firebug.

Answer 2

The jQuery UI styling doesn't have a .text CSS rule, so that has to be yours :) Wherever this rule is defined, or if it's for all inputs, it's probably something like this:

input { font-family: Arial; }
/* or... */
input.text { font-family: Arial; }

But <textarea> won't match <input>, so you need to change it a bit so that it also includes those <textarea> elements:

.text { font-family: Arial; } /* doesn't care what tag */
/* or...add both specifically */
input.text, textarea.text { font-family: Arial; }