질문/공유질답게시판

검색창 만들기 거의 다됐는데 여기서 막혀서 해결법을 모르겠네요. 도와주세요

기븐 
<div class="srch">
<form action="{getUrl()}" method="get" no-error-return-url="true">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input class="input" type="search" name="is_keyword" value="{$is_keyword}" title="{$lang->cmd_search}" />
</form>
</div>

 

우선 이게 검색창이구요

 

#hd .srch{position:relative;float:right;width:200px;margin:10px 6px 0;padding:0;border-style:none;*zoom:1;*height:22px}
#hd .srch .input{width:100%;height:27px;padding:5px;border:1px solid #738bcf;border-radius:5px;background:url("../img/google_custom_search_watermark.gif") 5px no-repeat;}
#hd .srch .input:focus{outline: 0;background:#fff}
#hd .srch .input:valid{background:#fff}

 

 

CSS를 이런 식으로 넣었는데..

 

다른건 다 됐는데, 검색창에 커서를 두거나 입력하지 않은 상태에서만 백그라운드 이미지를 보여 주고

 

포커스를 두거나 뭔가 타이핑했을 때에는 백그라운드 이미지를 숨기고 싶은데 이 부분이 잘 안되네요

 

포커스를 뒀을 때 숨기는 방법은 :focus 에서 "background:#fff" 를 해 주니까 해결되는데,

 

문제는 뭔가를 입력했을 때 포커스를 다른 곳으로 옮기면 다시 백그라운드 이미지가 나타나네요.

 

해당 부분을 스샷으로 찍으면 이렇게 됩니다.

 

캡처.PNG

타이핑할 때 까지는 백그라운드 이미지가 제대로 숨겨지는데, 타이핑하고 나서 다른 곳을 클릭하면 저렇게 되어 버리네요

 

그래서 알아본 끝에 다른 사이트에서는 :vaild 값을 넣어서 해결했길래, 똑같이 따라해 봤는데요

 

문제는, 다른 사이트는 뭔가를 입력했을 때만 :valid가 활성화되던데, 저는 그냥 기본적으로 활성화되어 있더군요.

 

즉, 기본적으로 :vaild 인 상태가 되어서, 결국 뭔가를 타이핑하지 않아도 백그라운드 이미지가 출력이 안 됩니다.

 

지금 여기서 막힌 상태입니다. 아무리 검색해봐도 대체 왜 그런지 알 수가 없네요

 

혹시 이거 해결법 아시는 분 계시면 도와주시면 감사하겠습니다.

 

테스트중인 사이트 주소는 https://metalgall.net/test 입니다.

위로 아래로
댓글 19
  • profile
    일단 title="{$lang->cmd_search}" 이거는 없어도 될 거 같은데요. 이게 검색이라는 단어에요.
  • profile ?
    저건 그냥 레이아웃에 기본적으로 있던걸 그냥 놔둔건데, 마우스 올렸을 때 "검색" 이라는 글자를 나오게 하는 거 같더군요.
  • ? profile
    그리고 현재는 백그라운드도 안나오는 상태로 변경중이신가봅니다. 증상이 안보이네요.
  • profile ?
    네. 지금 저 css 그대로 업로드한 상태라서, 말씀드렸다시피 "#hd .srch .input:valid{background:#fff}" 이게 항상 활성화가 돼서 백그라운드 이미지가 안 나타납니다.

    개발자 도구로 이 부분 체크 해제해주면 백그라운드 이미지가 나타납니다.

    요는 이게 기본적으로 활성화되는 증상을 해결하고, 뭔가 타이핑했을 때만 활성화되게 하고 싶은데 그 방법을 모르겠네요
  • ? profile
    저희 것이랑 일단 비교해 보세요.

    #cse-search-form input.gsc-input:valid{background:#fff !important;}
    #cse-search-form input.gsc-input-focus {background:#fff !important;}
    #cse-search-form input.gsc-input[type=text]:focus {outline: 0 !important;background:#fff !important;}
  • profile ?
    사실 본문에서 언급한 다른 사이트가... 크흠;;

    웹지기님 사이트는 정상적으로 뭔가 타이핑했을 때만 :valid 가 나타나는데(타이핑한 거 모두 지우면 다시 사라짐), 저는 아무것도 입력 안했는데도 나타나는데 그 이유를 알 수가 없네요.
  • ? profile
    일단 저희 것으로 고쳐보시고요.... 더 살펴보시는게....
  • profile

    close 는 따로 안만드셨나요 ? 저희랑 그 차이가 있네요. 그것 때문일수도 있을 거 같기도 해서요..

    저희는 X버튼이 사라져야 이미지가 다시 나오게 되어 있어서 아마도 글자가 입력 되어 있으면 이미지가 다시 못나올거에요.

     

    저희것 그대로 드리면..

     

    <button class="close-icon" type="reset"></button>

     

     

    .close-icon {border:1px solid transparent;background-color: transparent;display: inline-block;vertical-align: middle;outline: 0;cursor: pointer;position: relative; top: 0px; right: 35px;}
    .close-icon:after {content: "X";display: block;width: 15px;height: 15px; z-index:1;top: 0;bottom: 0;margin: auto;text-align: center;color: #666;font-weight: bold;font-size: 12px;cursor: pointer;}
    .gsc-input:not(:valid) ~ .close-icon {display: none;}
    .gsc-input::-ms-clear {display:none;}

     

     

    마지막 .gsc-input::-ms-clear {display:none;} 은 IE에서 자동으로 튀어나오는 close 없앤거입니다.

     

  • profile ?
    type를 text 말고 search 로 하면 자동으로 close 버튼이 나오더군요.

    text로 하면 또 레이아웃이 뒤틀려서..

    일단 확인해보도록 하겠습니다.
  • profile ?
    역시... 웹지기님 사이트에서 개발자도구로 해당 부분 완전히 지워봐도 (타이핑되어 있는 한) 여전히 백그라운드 이미지가 안 나오네요.

    차이점은, 웹지기님 사이트는 뭔가 입력되는 순간

    #cse-search-form input.gsc-input:valid{background:#fff !important;}

    이 :valid 부분이 자동으로 튀어나와서 백그라운드 이미지가 보이는 걸 막는데, 저희는 뭔가를 입력하지 않아도 기본적으로 활성화되어 버리네요.

    type를 search에서 text로 바꿔 봐도 마찬가지인 걸 봐서 그거랑은 관계 없는 거 같네요.

    구글링해 보니 valid 말고 active 등등 다른 것들도 나오던데, 이것들도 다 안되네요.
  • ? profile
    일단 저희 사이트와 비슷하게 해서 해결하시려면.. 물론 다른 곳은 close 버튼이랑 상관없이 백그라운드를 없애고 합니다만...

    close 버튼을 다셔서 글자를 입력하면 close가 나와서 백그라운를 없애주는 거로 하시는게 맞을거 같습니다.
  • ? profile

    그리고 저희족 close 동작처럼 하려면..

    <input class="input" type="text" name="is_keyword" required class="gsc-input" value="{$is_keyword}" title="{$lang->cmd_search}" />


    class="gsc-input" 이거 넣어야 합니다. 사이트에 맞는거로 바꾸세요.

  • profile ?
    웹지기님 사이트는 close 버튼 없애도 백그라운드 이미지 안 나타납니다.

    찾아보니까 자바스크립트로 구현해야 하는 거 같네요. 왜 다른 사이트들은 :valid나 :active 등으로 해결이 되는데 저는 안 되는지는 모르겠습니다만..
  • profile ?

    일단은 자바스크립트로 해결했습니다.

     

    http://stackoverflow.com/questions/13761654/html5-image-icon-to-input-placeholder

     

    여기 나온 것처럼 검색창 부분을

     

    <input class="input" type="search" name="is_keyword" onchange="hideIcon(this);" value="{$is_keyword}" title="{$lang->cmd_search}" />
<script>function hideIcon(self) {self.style.backgroundImage = 'none';}</script>

     

    이런 식으로 바꿔주니까 잘 되네요.

     

    단, 그 뒷부분에 있는 "자바스크립트 필요없다" 라면서 설명되어 있는

     

    #search:active { background-image: none; }

     

    이건 안 되네요.

  • profile ?

    하 근데 이것도 완전한 해결책은 아니네요..

    검색창에 뭔가를 입력하고 나서 검색결과 페이지로 넘어가고 나면, 여전히 백그라운드 이미지와 검색어가 함께 나타나네요. 하긴 자바스크립트로 뭔가 "타이핑"을 하면 background-image:none 이 나타나도록 한 거라 당연하지만..

  • ? profile

    input type="text" name="is_keyword" required class="gsc-input" value="{$is_keyword}" title="{$lang->cmd_search}" />

    required class="클래스" 이거 넣으셨나요? 이게 매칭이 되어야 컨트롤이 됩니다.

  • ? profile
    저희 사이트에서 개발자도구 로 required 이것 빼 보시면 백그라운드 사라지고 컨트롤 안되는게 보일겁니다. input 쪽에 class를 매칭시켜서 컨트롤 되는거니 아마 저희 css를 그대로 사용하실 거라면 제가 말씀 한대로 하면 될 것 같은데 잘은 모르겠네요.


    <input type="text" name="is_keyword" required class="input" value="{$is_keyword}" title="{$lang->cmd_search}" />

    이렇게 하시고..
    <button class="close-icon" type="reset"></button>

    리셋(close) 버튼 추가한다음..

    .close-icon {border:1px solid transparent;background-color: transparent;display: inline-block;vertical-align: middle;outline: 0;cursor: pointer;position: relative; top: 0px; right: 35px;}
    .close-icon:after {content: "X";display: block;width: 15px;height: 15px; z-index:1;top: 0;bottom: 0;margin: auto;text-align: center;color: #666;font-weight: bold;font-size: 12px;cursor: pointer;}
    .gsc-input:not(:valid) ~ .close-icon {display: none;}
    .gsc-input::-ms-clear {display:none;}

    위의 내용을 사이트에 맞게 고치면 되지 않을까요 ?
  • ?
    http://stackoverflow.com/questions/11757196/image-in-placeholder-html

    여기 있는 방법으로 해결했습니다. 단 여기 방법은 IE 9 미만일 경우 안 되는 문제는 있습니다. (저거 그대로 따라했을 경우, IE 9 미만이라면 이미지 대신에 "Google Custom Search" 라는 글자가 보이겠네요.)
  • ?

    최종 코드입니다.

     

    html:

    <div class="srch">
<form action="{getUrl()}" method="get" no-error-return-url="true">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input class="input" placeholder="Google Custom Search" type="search" name="is_keyword" value="{$is_keyword}" title="{$lang->cmd_search}" />
</form>
</div>

     

     

    css:

    #hd .srch{position:relative;float:right;width:200px;margin:10px 6px 0;padding:0;border-style:none;*zoom:1;*height:22px}
#hd .srch .input{width:100%;height:27px;padding:5px;border:2px solid #738bcf;border-radius:5px;}
#hd .srch .input:focus{outline:0}
#hd .srch .input::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("../img/google_custom_search_watermark.gif");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#hd .srch .input::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("../img/google_custom_search_watermark.gif");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#hd .srch .input:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("../img/google_custom_search_watermark.gif");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#hd .srch .input:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("../img/google_custom_search_watermark.gif");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}