css制作搜索栏（仿google）

效果图:

html

<div class="searchbar">
        <img src=images/search.png class="mg">
        <input type="text" id="search" value="Search Google or type a URL" 
        onfocus="if(value=='Search Google or type a URL')value=''"
        onblur="if(!value)value='Search Google or type a URL'" 
        name="keyword" >  /*当鼠标点击搜索框时，灰色的文字‘Search Google or type a URL’会隐藏。当闲置状态时，提示文字恢复。js的if语句。本文重点是css，这里先不详细解释。*/
        <img src=images/microphone.png class="mcp">
</div>

基本构想：
第一步：用input在html中建立输入框。
第二步：建立div父级元素，以装饰搜索框。因为input很难css装饰。
第三步：两个图标和搜索框中线对齐
第四步：整个搜索框居中

---

第一步：修改input默认属性

#search { 
    width: 440px;
    height: 40px;
    border:none;    /*取消默认的边框以设置自定义边框*/
    outline:none;   /*取消浏览器默认的蓝光边框以设置自定义的输入框*/
    font-size: 16px;        /*设置提示文字的字体大小*/
    color: rgb(112, 112, 112);   /*设置提示文字颜色*/
    margin-left: 10px;    /*给输入框与左边放大镜图标10px的间距*/
}

第二步：建立div父级元素，以装饰搜索框。因为默认的input边框很难css装饰。

.searchbar {     
    border: rgb(218, 218, 218) solid 1px;
    border-radius: 2em;    /*左右边框为半圆*/
    width: 552px;
    height: 42px;
    box-shadow: 0px 0px 5px rgb(212, 212, 212);
    margin: 0 auto;  /*重要！整个搜索框居中对齐*/
}

第三步：两个图标和搜索框中线对齐，因为图片高度和input高度都不同，不设置会高低不同。

#search, .mcp, .mg {
    vertical-align: middle;
}

第四步：搜索框居中，就是第二步的margin: 0 auto; 具体几个居中的用法请看上一个内容。

全部css

#search { 
    width: 440px;
    height: 40px;
    border:none;    /*取消默认的边框以设置自定义边框*/
    outline:none;   /*取消浏览器默认的蓝光边框以设置自定义的输入框*/
    font-size: 16px;        
    color: rgb(112, 112, 112);
    margin-left: 10px;
}
.searchbar {        /*目的是设置自定义边框，比如圆角与阴影*/
    border: rgb(218, 218, 218) solid 1px;
    border-radius: 2em;
    width: 552px;
    height: 42px;
    box-shadow: 0px 0px 5px rgb(212, 212, 212);
    margin: 0 auto;
}

.mcp {
    height: 35px;
}

.mg {
    height: 25px;
    margin-left: 15px;
}
#search, .mcp, .mg {
    vertical-align: middle;
}

其实我把整个页面都大概做了一遍,但是这个搜索栏可能复杂一些。大家可以来我的github找我玩。