-webkit-appearance 사용 방법 : searchfield-results-decoration?

Question

해피 홀리데이, 모두. 나는 이것에 대한 답을 얻을 때 매우 어리 석을 것 같지만, CSS "-webkit-appearance : searchfield-results-decoration"규칙을 사용하여 검색 상자 안에 작은 돋보기를 그리는 법을 알고 싶습니다. .

apple.com의 오른쪽 상단 모서리에있는 것과 같은 검색 창을 만들고 싶습니다. 둥근 모서리, 돋보기 아이콘 및 사용자가 입력을 시작하면 표시되는 취소/지우기 버튼이 있어야합니다. 나는 거기에있는 길을 최대한 활용할 수있다.

<input type="search" /> 

그러나 이것은 돋보기 아이콘이 없다. 또한 "-webkit-appearance : searchfield"로 입력 요소의 스타일을 지정할 수 있다는 것을 알고 있습니다. 그러나 이것은 적절한 왼쪽/오른쪽 패딩, 아이콘 또는 취소 버튼없이 둥근 모서리를 만드는 것처럼 보입니다.

Webkit에서 사용되는이 기능은 Cocoa WebView에서 사용되므로 신경 써야합니다. 나는 등 IE, 파이어 폭스, 오페라, 대한 마크 업을 필요가 없습니다

Answer 1

돋보기를 얻으려면 resutls="0"을 검색에 추가해야합니다. 예를 들어 results="5"과 같이 더 큰 값으로 결과를 설정하면 돋보기가 이전에 사용 된 검색어를 선택하는 데 사용할 수있는 드롭 다운 메뉴로 바뀝니다. 별도의 레이블을 사용하지 않고 컨트롤을 포커스 할 때 사라지는 자리 표시자를 대신 사용하여 자리 표시 자 텍스트를 추가 할 수도 있습니다.

<input type="search" results="0" placeholder="Search"> 

Answer 2

내가 웹킷 특정 CSS에 대해 잘 모르지만, 보통 CSS에서 배경 이미지는 다음과 같이 작동합니다 : "

style="background-image: url(glass.gif); 
     background-repeat: no-repeat; 
     background-position: left center; 
     padding-left: 16px" 

을 취소 "버튼을 클릭하면 Webkit 관련 명령이 없으면 Javascript가 필요합니다. "position : relative, left : -16px"로 작업하여 입력 필드 옆에 단추를 놓고 왼쪽으로 이동하여 입력 필드 위로 움직일 수 있습니다.