How to design Android Home Screen Search Box in HTML5?
Is it possible to design a HTML5 webpage which has a search box as the one appearing on th开发者_JAVA百科e Android Home screen.
At the time when I was posting this question, I wasn't able to replicate any similar look and feel, but within few hours, I'd post the code which I have written so far.
Meanwhile, if somebody can help me with a sample code for such a search box in HTML5, then it would be highly appreciated and save my time.
Thanks in advance.
EDIT:
For those who haven't looked at the Android Search Box, please refer to this link.
EDIT:
Following is the code so far I have wrote:
<!DOCTYPE html>
<html>
<head>
<title> Android Like Search Box </title>
<style>
#searchWrapper{
border: 1px solid #e2e2e2;
}
#searchicon{
vertical-align: middle;
}
#gicon{
vertical-align: middle;
}
input[type="search"] {
-webkit-appearance: textfield;
}
</style>
</head>
<body>
<div id="searchWrapper">
<img id="gicon" name="gicon" src="gicon.png" alt="google icon" />
<input name="q" type="search" >
<img id="searchicon" name="searchicon" src="searchicon.png" alt="search" />
</div>
</body>
</html>
Just to add something i did right now, i hope you can reuse it... :)
<!doctype>
<html>
<head>
<title>Searchbox</title>
</head>
<body>
<style>
#outerContainer{
width: 350px;
height: 60px;
border-radius: 10px;
box-shadow: 0 0 5px 1px #888;
display: block;
}
.googleButton{
position: relative;
left: 5px;
width: 40px;
height:50px;
}
#srchBox{
border-radius: 3px;
margin-left: 8px;
height: 50px;
width:200px;
margin-top: 5px;
}
.otherButton{
width:43px;
height: 50px;
}
</style>
<div id="outerContainer">
<button class="googleButton">G</button>
<input id="srchBox" type="search">
<button class="otherButton">X</button>
<button class="otherButton">Y</button>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论