zoukankan      html  css  js  c++  java
  • 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;
    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;
    99%;height:99%;
    border-top-style:none;
    border-right-style:none;
    border-left-style:none;
    background-color:#f6f6f6;
    border-bottom-style:none;
    }

    1、只有下划线的文本框:
    <input style="border:0;border-bottom:1 solid black;background:;">

    2、软件序列号式的输入框:
    <script for="T" event="onkeyup">
    if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
    </script>
    <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">

    3、软件序列号式的输入框(完整版):
    <script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
    <script for="T" event="onfocus">select();</script>
    <script for="Submit" event="onclick">
    var sn=new Array();
    for(i=0;i<T.length;i++)
    sn=T.value;
    alert(sn.join("—"));
    </script>
    <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
    <input type="submit" name="Submit">

    4、输入框景背景透明:
    <input style="background:transparent;border:1px solid #ffffff">

    5、鼠标划过输入框,输入框背景色变色:
    <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'" 
    style=" 106; height: 21" 
    onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-1px;border-color=black">

    6、输入字时输入框边框闪烁(边框为小方型):
    <Script Language="JavaScript">
    function borderColor(){
    if(self['oText'].style.borderColor=='red'){
    self['oText'].style.borderColor = 'yellow';
    }else{
    self['oText'].style.borderColor = 'red';
    }
    oTime = setTimeout('borderColor()',400);
    }
    </Script>
    <input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">

    7、输入字时输入框边框闪烁(边框为虚线):
    <style>
    #oText{border:1px dotted #ff0000;ryo:expression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
    </style>
    <input type="text" id="oText">

    8、自动横向廷伸的输入框:
    <input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">

    9、自动向下廷伸的文本框:
    <textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">输入几个回车试试</textarea>

     

     转载来源

     

     

  • 相关阅读:
    常用加密算法的Java实现总结(二) ——对称加密算法DES、3DES和AES
    常用加密算法的Java实现(一) ——单向加密算法MD5和SHA
    在服务器上用Fiddler抓取HTTPS流量
    org.apache.commons.lang下的工具类
    Spring-bean作用域scope详解
    Tomcat性能调优方案
    JavaScript 闭包究竟是什么
    JavaScript跨域总结与解决办法
    《JAVA与模式》之简单工厂模式
    hibernate缓存机制详细分析
  • 原文地址:https://www.cnblogs.com/yangzhong/p/1756104.html
Copyright © 2011-2022 走看看