How to design Android Home Screen Search Box in HTML5?_问答_开发者

How to design Android Home Screen Search Box in HTML5?

开发者 https://www.devze.com 2023-03-17 21:46 出处：网络

Is it possible to design a HTML5 webpage which has a search box as the one appearing on th开发者_JAVA百科e Android Home screen.

相关专题：css jquery

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>