Question

是否可以设计一个HTML5网页，其中包含一个出现在Android主屏幕上的搜索框。

在我发布这个问题时，我无法复制任何类似的外观和感觉，但在几个小时内，我会发布到目前为止我写的代码。

与此同时，如果有人可以帮我提供HTML5中这样一个搜索框的示例代码，那么我将非常感激并节省我的时间。

提前致谢。

修改

对于尚未查看Android搜索框的用户，请参阅此link。

修改

以下是我写的代码：

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

Answer 1

只是为了添加我现在做的东西，我希望你可以重复使用它...... ：）

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

如何在HTML5中设计Android主屏幕搜索框？

1 个答案: