使用 jQueryUI 设置常规表单元素的样式

Question

我在我的网站上使用 jQueryUI，以及 http://www.filamentgroup.com/lab/ jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ 作为选择元素的替换。

但我在设置其他表单元素、文本和文本区域的样式时遇到问题。

有人知道如何正确地做到这一点吗？

Answer 1

这是当我想要使用 javascript 的样式表单时使用的...

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

Answer 2

这是我的表单CSS。我从在线表格生成器中得到了这个。但我现在找不到该网站的网址。

/**** 输入和标签 ****/

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%;
}

更新

以及更多 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

如何使用 jQuery UI 增强表单