13种常用按钮、文本框、表单等CSS样式一、按钮样式.buttoncss?{????font-family:?tahoma,?宋体?/*www.52
13种常用按钮、文本框、表单等CSS样式
一、按钮样式
.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;
}
二、蓝色按钮
.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?;
}
三、红色按钮
.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?;
}
四、选择按钮
.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?;
}?
??
五、绿色按钮
.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?;
}
六、图像按钮
.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:?#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;
}
九、线条文本编辑框
.editbox{
????background:?#ffffff;
????border:?1px?solid?#b7b7b7;
????color:?#003366;
????cursor:?text;
????font-family:?"arial";
????font-size:?9pt;
????height:?18px;
????padding:?1px;?/*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*/
}
十一、阴影风格的表单
.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:?#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
}
十三、没有边框的输入框
.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;
}
