搜索框样式

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了搜索框样式相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于搜索框样式的主要内容，如果未能解决你的问题，请参考以下文章

框左边加一个小图标，css样式应该怎么写

html和css制作一个搜索框，要内容与搜索图标结合，该怎么做？

怎样用css设定下表框的宽度、样式、颜色

如何在WordPress菜单中添加搜索框？

Xamarin.Android 制作搜索框

仿京东手机端搜索框