首页 > 其他 > 详细

搜索框样式

时间:2017-12-18 17:50:16      阅读:306      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> 自制search搜索框组件 </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <style>  
    .searchBlock{  
        width: 110px;  
        border:solid 1px #ddd;  
        border-radius: 5px;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
        -khtml-border-radius: 5px;  
    }  
      
    .searchBlock span{  
        float: left;  
    }  
    .searchText{  
        border: none;  
        width: 80px;  
        margin: 2px 5px;  
        outline: 0 none;  
    }  
    .searchBtn{  
        border: none;  
        width: 16px;  
        height: 16px;  
        cursor: pointer;  
        background-image: url("images/ico_sear.gif");  
        background-repeat: no-repeat;  
        display: inline;  
        margin: 2px 0px;  
    }  
  </style>  
 </head>  
  
 <body>  
  <div class="searchBlock">  
    <span>  
        <input type="text" id="search" name="search" class="searchText">  
    </span>  
      
    <input type="button" class="searchBtn">  
  </div>  
 </body>  
</html>  


<script type="text/javascript">
  //搜索信息传到后台
     function button(){
        var search=document.getElementById("search").value;
        window.location.href="index.php?m=Admin&c=Gameuser&a=index&search="+search;
     }
</script>

技术分享图片

技术分享图片

搜索框样式

原文:http://www.cnblogs.com/mengor/p/8057956.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!