效果图:
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找我玩。