jquery - jQueryUI を使用した通常のフォーム要素のスタイリング

Question

私は自分のサイトで jQueryUI を使用しています。また、select 要素の代わりに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

jQuery UI を使用してフォームを強化する方法

Answer 3

これが私のフォーム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;
}