Styling regelmäßige Formularelemente mit jQueryUI

Ich benutze jQueryUI auf meiner Website, sowie http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ als Ersatz für ausgewählte Elemente.Styling regelmäßige Formularelemente mit jQueryUI

Aber ich habe ein Problem, andere Formularelemente, Text und Textarea zu stylen.

Haben Sie jemanden Idee, wie man das richtig macht?

Quelle

2009-12-12 umpirsky

Hier ist mein Formular css. Ich habe das von einem Online-Formular-Generator. Aber ich kann die URL zur Site jetzt nicht finden.

/**** Eingänge und 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%; 
}

aktualisieren

Und einige weitere 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; 
}

Quelle

2009-12-12 20:50:12 Steven