常用按钮、文本框、表单等CSS样式13例

祝福的云彩你说

祝福的云彩你说

2016-02-19 19:48

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享常用按钮、文本框、表单等CSS样式13例的教程,热爱PS的朋友们快点看过来吧!

  一、按钮样式

.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;
}

  2、蓝色按钮

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

.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 ;
}

3、红色按钮

.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 ;
}

4、选择按钮

.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 ;
}
 

  5、绿色按钮

.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 ;
}

  6、图像按钮

.imagebutton{
   cursor: hand;   /*改变鼠标形状 www.52css.com*/
}

  7、页面正文

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

  8、下拉选择框

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;
}

  9、线条文本编辑框

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

10、多行文本框

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

.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*/
}

  11、阴影风格的表单

.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);
}

12、只显一条横线的输入框


.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
}

13、没有边框的输入框

.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;
}

展开更多 50%)
分享

猜你喜欢

常用按钮、文本框、表单等CSS样式13例

Web开发
常用按钮、文本框、表单等CSS样式13例

13种常用按钮、文本框、表单等CSS样式

Web开发
13种常用按钮、文本框、表单等CSS样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS表单美化之文本框与按钮一例

Web开发
CSS表单美化之文本框与按钮一例

用好HTML表单的文本框

Web开发
用好HTML表单的文本框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

celluloid如何编辑文本框的样式

电脑网络
celluloid如何编辑文本框的样式

CSS巧用expression来区分只读文本框

Web开发
CSS巧用expression来区分只读文本框

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何查找页面中的CSS bug

如何查找页面中的CSS bug

在oracle中字段类型LONG的使用注意事项

在oracle中字段类型LONG的使用注意事项
下拉加载更多内容 ↓