如何在HTML5中設計Android主屏幕搜索框？

是否可以設計一個HTML5網頁，其中的搜索框出現在Android主屏幕上。如何在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>

來源

2011-07-06 Mahendra Liya

想要什麼/嘗試過的鏈接在這裏會很棒，並不是每個人都知道Android主屏幕是什麼樣子。 – Kyle

@Kyle：感謝您指出，我添加了一個鏈接，顯示搜索框 –

我想補充的東西我沒有，現在，我希望你可以重複使用它... :)

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

來源

2011-07-06 13:35:49

這是一個很好的設計..如何使用一個漸變填充使用css的一些圓形半徑的矩形邊框？你可以用同一個...更新你的代碼嗎？ –

給我發電子郵件，我們會以更好的方式進行協調。它是jorgeguberte [at] gmail [dot] com。然後我們在這裏發佈結果。 :) –

如何在HTML5中設計Android主屏幕搜索框？

回答

相關問題