검색창 X표시되게 하기, 지우기 - input type의 search 옵션 > 웹제작/운영

사이트 내 전체검색
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go

웹제작/운영

HTML 검색창 X표시되게 하기, 지우기 - input type의 search 옵션

페이지 정보

profile_image
작성자 키스세븐
조회 3,521회 작성일 22-05-07 18:03

본문

검색창 X표시

input의 search 옵션


검색창에 글자를 입력하면 자동으로 X표시가 나타난다.

그런데 홈페이지를 만들다보면 검색창에 X표시가 나타나지 않을 때가 있다. 

그 이유는 input type의 속성 때문이다. 



검색창 X표시되게 하기, 지우기 - input type의 search 옵션



검색창에 X 지우기 표시


이제는 예전처럼 따로 X표시를 만들어서 넣을 필요가 없다. 최신 브라우저에서는 자동으로 지원하기 때문이다. 

단, 평상시에는 안 보이고 글자를 입력하기 시작하면 생긴다.


만약 검색창을 만들었는데 x표시가 생기지 않는다면, input의 type을 잘못 정한 것이다. 

검색창에 X표시가 생기게 하려면 input 타입을 search로 해야 한다.


아래 코드에서 볼 때, 첫 번째처럼 하면 x표시가 생기지 않고, 두 번째처럼 하면 자동으로 생긴다.


[code]

<input type="text"> : 자동으로 X표시가 생기지 않음

<input type="search"> : 자동으로 X표시가 생김

[/code]

타입에서 text는 글자를 입력 받겠다는 것이고, search는 검색어를 입력 받겠다는 것이기 때문이다.



검색창에 X 클리어 표시 지우기


위에서 X표시가 나타나게 해봤으니, 이번에는 나타나지 않게도 해 보자. CSS 파일에서 적용하면 된다.


[code]

<style type="text/css">

input.hide-clear[type=search]::-ms-clear, input.hide-clear[type=search]::-ms-reveal {

   display:none; 

}

</style>

[/code]


만약 크롬에서는 적용되지 않는다면 아래처럼도 적용해 볼만하다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)


[code]

<style type="text/css">

input.hide-clear[type="search"]::-webkit-search-decoration,

input.hide-clear[type="search"]::-webkit-search-cancel-button,

input.hide-clear[type="search"]::-webkit-search-results-button,

input.hide-clear[type="search"]::-webkit-search-results-decoration {

  display: none; 

}

</style>

[/code]

추천0
총 87개 (1Page)
  • RSS
웹제작/운영 목록
번호 제목 조회 추천 날짜
공지 공지 449 0 03-26
86 그누보드 297 0 02-25
85 그누보드 1264 0 10-17
84 SCRIPT 567 0 10-17
83 CSS 617 0 09-10
82 PHP 1083 0 08-26
81 PHP 644 0 08-21
80 기타활용 590 0 08-15
79 그누보드 1101 0 08-05
78 CSS 817 0 08-04
77 HTML 1515 0 07-24
76 그누보드 420 0 07-24
75 HTML 738 0 07-21
74 CSS 656 0 07-18
73 그누보드 618 0 07-09

검색


    허브사이트 "키스세븐"
    [허브사이트란?]
    수많은 사이트와 포털을
    한 번에 모아서
    사용할 수 있는 서비스를 말합니다.