常用按鈕、文本框、表單等CSS樣式

雖然CSS樣式的學習需要我們動手多實踐，需要多做案例，思致思考，但有時候注意資料的收集與整理也是非常重要的，在實際開發中往往會起到事半功倍的效果。在52CSS.com的文檔中，也提供了豐富的內容。下面一些關於按鈕、文本框、表單的常用CSS樣式。大家可以參考。一、按鈕樣式

1. ExampleSourceCode[www.52css.com]
2. .buttoncss{
3. font-family:」tahoma」,」宋體」;/*www.52css.com*/
4. font-size:9pt;color:#003399;
5. border:1px#003399solid;
6. color:#006699;
7. border-bottom:#93bee21pxsolid;
8. border-left:#93bee21pxsolid;
9. border-right:#93bee21pxsolid;
10. border-top:#93bee21pxsolid;
11. background-image:url(../images/bluebuttonbg.gif);
12. background-color:#e8f4ff;
13. cursor:hand;
14. font-style:normal;
15. width:60px;
16. height:22px;
17. }

Example Source Code [www.52css.com].buttoncss {font-family: 」tahoma」, 」宋體」; /*www.52css.com*/font-size:9pt; color: #003399;border: 1px #003399 solid;color:#006699;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/bluebuttonbg.gif);background-color: #e8f4ff;cursor: hand;font-style: normal ;width:60px;height:22px;}

二、藍色按鈕

1. ExampleSourceCode[www.52css.com]
2. .bluebuttoncss{
3. font-family:」tahoma」,」宋體」;/*www.52css.com*/
4. font-size:9pt;color:#003366;
5. border:0px#93bee2solid;
6. border-bottom:#93bee21pxsolid;
7. border-left:#93bee21pxsolid;
8. border-right:#93bee21pxsolid;
9. border-top:#93bee21pxsolid;*/
10. background-image:url(../images/blue_button_bg.gif);
11. background-color:#ffffff;
12. cursor:hand;
13. font-style:normal;
14. }

Example Source Code [www.52css.com].bluebuttoncss {font-family: 」tahoma」, 」宋體」; /*www.52css.com*/font-size: 9pt; color: #003366;border: 0px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;*/background-image:url(../images/blue_button_bg.gif);background-color: #ffffff;cursor: hand;font-style: normal ;}

三、紅色按鈕

Html代碼

1. ExampleSourceCode[www.52css.com]
2. .redbuttoncss{
3. font-family:」tahoma」,」宋體」;/*www.52css.com*/
4. font-size:9pt;color:#0066cc;
5. border:1px#93bee2solid;
6. border-bottom:#93bee21pxsolid;
7. border-left:#93bee21pxsolid;
8. border-right:#93bee21pxsolid;
9. border-top:#93bee21pxsolid;
10. background-image:url(../images/redbuttonbg.gif);
11. background-color:#ffffff;
12. cursor:hand;
13. font-style:normal;
14. }

Example Source Code [www.52css.com].redbuttoncss {font-family: 」tahoma」, 」宋體」; /*www.52css.com*/font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/redbuttonbg.gif);background-color: #ffffff;cursor: hand;font-style: normal ;}

四、選擇按鈕

1. ExampleSourceCode[www.52css.com]
2. .selectbuttoncss{
3. font-family:」tahoma」,」宋體」;/*www.52css.com*/
4. font-size:9pt;color:#0066cc;
5. border:1px#93bee2solid;
6. border-bottom:#93bee21pxsolid;
7. border-left:#93bee21pxsolid;
8. border-right:#93bee21pxsolid;
9. border-top:#93bee21pxsolid;
10. background-image:url(../images/blue_button_bg.gif);
11. background-color:#ffffff;
12. cursor:hand;
13. font-style:normal;
14. }

Example Source Code [www.52css.com].selectbuttoncss{font-family: 」tahoma」, 」宋體」; /*www.52css.com*/font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/blue_button_bg.gif);background-color: #ffffff;cursor: hand;font-style: normal ;}

五、綠色按鈕

1. ExampleSourceCode[www.52css.com]
2. .greenbuttoncss{
3. font-family:」tahoma」,」宋體」;/*www.52css.com*/
4. font-size:9pt;color:#0066cc;
5. border:1px#93bee2solid;
6. border-bottom:#93bee21pxsolid;
7. border-left:#93bee21pxsolid;
8. border-right:#93bee21pxsolid;
9. border-top:#93bee21pxsolid;
10. background-image:url(../images/greenbuttonbg.gif);
11. background-color:#ffffff;
12. cursor:hand;
13. font-style:normal;
14. }

Example Source Code [www.52css.com].greenbuttoncss {font-family: 」tahoma」, 」宋體」; /*www.52css.com*/font-size: 9pt; color: #0066cc;border: 1px #93bee2 solid;border-bottom: #93bee2 1px solid;border-left: #93bee2 1px solid;border-right: #93bee2 1px solid;border-top: #93bee2 1px solid;background-image:url(../images/greenbuttonbg.gif);background-color: #ffffff;cursor: hand;font-style: normal ;}

六、圖像按鈕

1. ExampleSourceCode[www.52css.com]
2. .imagebutton{
3. cursor:hand;/*改變滑鼠形狀www.52css.com*/
4. }

Example Source Code [www.52css.com].imagebutton{cursor: hand; /*改變滑鼠形狀 www.52css.com*/}

七、頁面正文

Html代碼

1. ExampleSourceCode[www.52css.com]
2. body{
3. scrollbar-face-color:#ededf3;
4. scrollbar-highlight-color:#ffffff;
5. scrollbar-shadow-color:#93949f;
6. scrollbar-3dlight-color:#ededf3;
7. scrollbar-arrow-color:#082468;
8. scrollbar-track-color:#f7f7f9;
9. scrollbar-darkshadow-color:#ededf3;
10. font-size:9pt;/*www.52css.com*/
11. color:#003366;
12. overflow:auto;
13. }
16. ExampleSourceCode[www.52css.com]
17. td{font-size:12px}
18. th{
19. font-size:12px;
20. }

Example Source Code [www.52css.com]body {scrollbar-face-color: #ededf3;scrollbar-highlight-color: #ffffff;scrollbar-shadow-color: #93949f;scrollbar-3dlight-color: #ededf3;scrollbar-arrow-color: #082468;scrollbar-track-color: #f7f7f9;scrollbar-darkshadow-color: #ededf3;font-size: 9pt; /*www.52css.com*/color: #003366;overflow:auto;}Example Source Code [www.52css.com]td { font-size: 12px }th {font-size: 12px;}

八、下拉選擇框

1. ExampleSourceCode[www.52css.com]
2. select{
3. border-right:#0000001pxsolid;
4. border-top:#ffffff1pxsolid;
5. font-size:12px;/*www.52css.com*/
6. border-left:#ffffff1pxsolid;
7. color:#003366;
8. border-bottom:#0000001pxsolid;
9. background-color:#f4f4f4;
10. }

Example Source Code [www.52css.com]select{border-right: #000000 1px solid;border-top: #ffffff 1px solid;font-size: 12px; /*www.52css.com*/border-left: #ffffff 1px solid;color:#003366;border-bottom: #000000 1px solid;background-color: #f4f4f4;}

九、線條文本編輯框

1. ExampleSourceCode[www.52css.com]
2. .editbox{
3. background:#ffffff;
4. border:1pxsolid#b7b7b7;
5. color:#003366;
6. cursor:text;
7. font-family:」arial」;
8. font-size:9pt;
9. height:18px;
10. padding:1px;/*www.52css.com*/
11. }

Example Source Code [www.52css.com].editbox{background: #ffffff;border: 1px solid #b7b7b7;color: #003366;cursor: text;font-family: 」arial」;font-size: 9pt;height: 18px;padding: 1px; /*www.52css.com*/}

十、多行文本框

1. ExampleSourceCode[www.52css.com]
2. .multieditbox{
3. background:#f8f8f8;
4. border-bottom:#b7b7b71pxsolid;
5. border-left:#b7b7b71pxsolid;
6. border-right:#b7b7b71pxsolid;
7. border-top:#b7b7b71pxsolid;
8. color:#000000;
9. cursor:text;
10. font-family:」arial」;
11. font-size:9pt;
12. padding:1px;/*www.52css.com*/
13. }

Example Source Code [www.52css.com].multieditbox{background: #f8f8f8;border-bottom: #b7b7b7 1px solid;border-left: #b7b7b7 1px solid;border-right: #b7b7b7 1px solid;border-top: #b7b7b7 1px solid;color: #000000;cursor: text;font-family: 」arial」;font-size: 9pt;padding: 1px; /*www.52css.com*/}

十一、陰影風格的表單

1. ExampleSourceCode[www.52css.com]
2. .shadow{
3. position:absolute;
4. z-index:1000;
5. top:0px;
6. left:0px;/*www.52css.com*/
7. background:gray;
8. background-color:#ffcc00;
9. filter:progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
10. }

Example Source Code [www.52css.com].shadow {position:absolute;z-index:1000;top:0px;left:0px; /*www.52css.com*/background:gray;background-color:#ffcc00;filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);}

十二、只顯一條橫線的輸入框

Html代碼

1. ExampleSourceCode[www.52css.com]
2. .logintxt{
3. border-right:#ffffff0pxsolid;
4. border-top:#ffffff0pxsolid;
5. font-size:9pt;/*www.52css.com*/
6. border-left:#ffffff0pxsolid;
7. border-bottom:#c0c0c01pxsolid;
8. background-color:#ffffff
9. }

Example Source Code [www.52css.com].logintxt{border-right: #ffffff 0px solid;border-top: #ffffff 0px solid;font-size: 9pt; /*www.52css.com*/border-left: #ffffff 0px solid;border-bottom: #c0c0c0 1px solid;background-color: #ffffff}

十三、沒有邊框的輸入框

Html代碼

1. ExampleSourceCode[www.52css.com]
2. .noneinput{
3. text-align:center;
4. width:99%;height:99%;
5. border-top-style:none;
6. border-right-style:none;
7. border-left-style:none;
8. background-color:#f6f6f6;
9. border-bottom-style:none;
10. }

推薦閱讀：