一、按鈕樣式 .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、自動向下廷伸的文字框:
轉載來源
|
13種常用按鈕、文字框、表單等CSS樣式
轉載於:https://www.cnblogs.com/yangzhong/archive/2010/06/11/1756104.html
相關文章
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- Python文字框與按鈕Python
- 常用CSS樣式1:文字樣式CSS
- 1.5 常用CSS樣式1:文字樣式CSS
- css 最經典的按鈕樣式CSS
- 「HTML+CSS」--自定義按鈕樣式【004】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【003】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【001】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【002】HTMLCSS
- DcatAdmin行操作按鈕樣式調整(圖示+文字)
- Qt更改按鈕樣式 (以QSpinBox使用左右按鈕樣式為例)QT
- CSS——CSS 給盒子、背景、連結、列表、表單、表格等加樣式CSS
- 【CSS】關於表單樣式CSS
- 直播網站程式原始碼,給元件按鈕、文字編輯框等設定圓形邊框、顏色網站原始碼元件
- css設定按鈕心跳收縮後,按鈕文字上下抖動,如何解決?CSS
- JavaScript新增一個文字框並帶有刪除按鈕JavaScript
- CSS3 美化radio單選按鈕CSSS3
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- 常用CSS樣式2:其它樣式CSS
- 如何自定義radio按鈕的樣式
- 成品直播原始碼推薦,原生button按鈕css去掉預設樣式原始碼CSS
- CSS 設定文字樣式CSS
- 1.6 常用CSS樣式2:其它樣式CSS
- antd-mobile 自定義picker按鈕樣式
- 常用CSS樣式3:定位CSS
- 點選一個按鈕使其樣式發生變化,再點選另一個按鈕發生同樣變化,但上一個按鈕樣式復原
- CSS 小結筆記之三種樣式表CSS筆記
- CSS 設定placeholder文字樣式CSS
- Win10系統更改開始選單按鈕樣式的方法Win10
- 利用純 CSS3 定製單選/多選框樣式CSSS3
- 登陸註冊按鈕的樣式設計
- CSS——CSS 給文字加樣式:① 字型屬性CSS
- CSS 文字框圓角CSS
- RadioButton文字按鈕間距設定,按鈕在文字右端顯示,RadioButton 右端對齊
- CSS3簡單圓角立體按鈕效果CSSS3
- css樣式常用的樣式以及選擇器CSS
- 1.8 常用CSS樣式3:定位CSS
- 常用CSS樣式2:浮動CSS