日期:2014-05-17  浏览次数:20788 次

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:?#f4f