使用 jQueryUI 为常规表单元素设置样式答案

【问题标题】：Styling regular form elements with jQueryUI使用 jQueryUI 为常规表单元素设置样式
【发布时间】：2009-12-12 20:32:45
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery css jquery-ui forms elements

【解决方案1】：

当我想要使用 javascript 的样式表单时，我会使用以下内容...

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

How to Enhance Forms using jQuery UI

【讨论】：