13种常用按钮、文本框、表单等CSS样式
| 一、按鈕樣式 .buttoncss{ font-family:"tahoma","宋體";/*www.52css.com*/ font-size:9pt;color:#003399; border:1px#003399solid; color:#006699; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/bluebuttonbg.gif); background-color:#e8f4ff; cursor:hand; font-style:normal; width:60px; height:22px; } 二、藍色按鈕 .bluebuttoncss{ font-family:"tahoma","宋體";/*www.52css.com*/ font-size:9pt;color:#003366; border:0px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid;*/ background-image:url(../images/blue_button_bg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 三、紅色按鈕 .redbuttoncss{ font-family:"tahoma","宋體";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/redbuttonbg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 四、選擇按鈕 .selectbuttoncss{ font-family:"tahoma","宋體";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/blue_button_bg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 五、綠色按鈕 .greenbuttoncss{ font-family:"tahoma","宋體";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/greenbuttonbg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 六、圖像按鈕 .imagebutton{ cursor:hand;/*改變鼠標形狀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; } td{font-size:12px} th{ font-size:12px; } 八、下拉選擇框 select{ border-right:#0000001pxsolid; border-top:#ffffff1pxsolid; font-size:12px;/*www.52css.com*/ border-left:#ffffff1pxsolid; color:#003366; border-bottom:#0000001pxsolid; background-color:#f4f4f4; } 九、線條文本編輯框 .editbox{ background:#ffffff; border:1pxsolid#b7b7b7; color:#003366; cursor:text; font-family:"arial"; font-size:9pt; height:18px; padding:1px;/*www.52css.com*/ } 十、多行文本框 .multieditbox{ background:#f8f8f8; border-bottom:#b7b7b71pxsolid; border-left:#b7b7b71pxsolid; border-right:#b7b7b71pxsolid; border-top:#b7b7b71pxsolid; color:#000000; cursor:text; font-family:"arial"; font-size:9pt; padding:1px;/*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); } 十二、只顯一條橫線的輸入框 .logintxt{ border-right:#ffffff0pxsolid; border-top:#ffffff0pxsolid; font-size:9pt;/*www.52css.com*/ border-left:#ffffff0pxsolid; border-bottom:#c0c0c01pxsolid; background-color:#ffffff } 十三、沒有邊框的輸入框 .noneinput{ text-align:center; width:99%;height:99%; border-top-style:none; border-right-style:none; border-left-style:none; background-color:#f6f6f6; border-bottom-style:none; } 1、只有下劃線的文本框: 2、軟件序列號式的輸入框: 3、軟件序列號式的輸入框(完整版): 4、輸入框景背景透明: 5、鼠標劃過輸入框,輸入框背景色變色: 6、輸入字時輸入框邊框閃爍(邊框為小方型): 7、輸入字時輸入框邊框閃爍(邊框為虛線): 8、自動橫向廷伸的輸入框: 9、自動向下廷伸的文本框: ? ? ?轉載來源 ? http://www.boka.cn/data/html/news/2009-03-31/458.html? ? |
轉載于:https://www.cnblogs.com/yangzhong/archive/2010/06/11/1756104.html
總結
以上是生活随笔為你收集整理的13种常用按钮、文本框、表单等CSS样式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: macOS 汇编指南
- 下一篇: OpenSesame免费提供新冠病毒防疫