Styling regular form elements with jQueryUI

Question

I'm using jQueryUI on my site, as well as http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ as replacement for select elements.

But I have a problem to style other form elements, text and textarea.

Have anybody idea how to do this right way?

Answer 1

Here is what I use when I want style forms using javascript...

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Answer 2

Here is my form css. I got this from an online form generator. But I can't find the URL to the site now.

/**** Inputs and Labels ****/

label.description
{
    border:none;
    color:#222;
    display:block;
    font-size:95%;
    font-weight:700;
    line-height:150%;
    padding:0 0 1px;
}

span.symbol
{
    font-size:115%;
    line-height:130%;
}

input.text
{
    background:#fff url(../../../images/shadow.gif) repeat-x top;
    border-bottom:1px solid #ddd;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-top:1px solid #7c7c7c;
    color:#333;
    font-size:100%;
    margin:0;
    padding:2px 0;
}

input.file
{
    color:#333;
    font-size:100%;
    margin:0;
    padding:2px 0;
}

textarea.textarea
{
    background:#fff url(../../../images/shadow.gif) repeat-x top;
    border-bottom:1px solid #ddd;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-top:1px solid #7c7c7c;
    color:#333;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    margin:0;
    width:99%;
}

select.select
{
    color:#333;
    font-size:100%;
    margin:1px 0;
    padding:1px 0 0;
    background:#fff url(../../../images/shadow.gif) repeat-x top;
    border-bottom:1px solid #ddd;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-top:1px solid #7c7c7c;
}


input.currency
{
    text-align:right;
}

input.checkbox
{
    display:block;
    height:13px;
    line-height:1.4em;
    margin:6px 0 0 3px;
    width:13px;
}

input.radio
{
    display:block;
    height:13px;
    line-height:1.4em;
    margin:6px 0 0 3px;
    width:13px;
}


label.choice
{
    color:#444;
    display:block;
    font-size:100%;
    line-height:1.4em;
    margin:-1.55em 0 0 25px;
    padding:4px 0 5px;
    width:90%;
}

Update

And some more CSS

input[type="text"], textarea, input[type="password"] {
  background:#fff url(../img/shadow.gif) repeat-x scroll center top;
  border: solid 1px;
  border-color:#7c7c7c #c3c3c3 #ddd;
  color:#333;
  margin:0;
  padding:2px 0;
}
textarea {
  overflow: auto;
}

input[type="submit"], input[type="button"], input[type="reset"], input[type="file"]
{
  cursor:pointer;
  padding:0 3px 2px 3px; 
  text-align: center;
  vertical-align: bottom;
  height:20px;      
  /*background: transparent url('../img/button_bg1.png') repeat-x;*/
  color: #444;
  font-size: 12px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  border-radius: 5px;             /* CSS3 rounded corners */
  -moz-border-radius: 5px;        /* Rounded corners for Firefox */
  -webkit-border-radius: 5px;     /* Rounded corners for Safari */
  width/*IE*/: auto;
}

input[type="button"] {
  position: relative;
  top: -1px;
}

Answer 3

How to Enhance Forms using jQuery UI