HTML5에서 Android 홈 화면 검색 창을 디자인하는 방법은 무엇입니까?

Android 홈 화면에 나타나는 것과 같은 검색 창을 가진 HTML5 웹 페이지를 디자인 할 수 있습니까?HTML5에서 Android 홈 화면 검색 창을 디자인하는 방법은 무엇입니까?

이 질문을 게시 할 당시 비슷한 모양과 느낌을 복제 할 수 없었지만 지금까지 작성한 코드를 몇 시간 내에 게시 할 것입니다.

누군가가 HTML5의 검색 창에 대한 샘플 코드를 통해 나를 도울 수 있다면 매우 감사하게 생각하고 시간을 절약 할 수 있습니다.

미리 감사드립니다.

편집 : 안드로이드 검색 상자에보고하지 않은 사람들을 위해

는이 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

당신이 원했던/시도한 링크는 여기 좋을 것입니다. 모두가 안드로이드 홈 화면이 어떻게 생겼는지 알지 못합니다. – 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 홈 화면 검색 창을 디자인하는 방법은 무엇입니까?

답변

관련 문제