Snippet 본문

GNB검색창_기본형

등록
신예호 (등록일 : 2013/12/04)
Type
PC
설명
서비스내에서 사용되는 내부검색창
미리보기
Html
<form id="daumSearch" name="daumSearch" action="" onsubmit="return false">
    <fieldset class="fld_inside"><!--  내부검색 fld_inside 추가 -->
        <legend class="screen_out">검색어 입력폼</legend>
        <div class="box_searchbar"><!-- 입력창 선택시 search_on 추가  -->
            <input type="text" class="tf_keyword bg_on" id="qTop" name="q" value="" title="검색어 입력"  autocomplete="off" spellcheck="false"/><!-- bg_on삭제시 bg삭제  -->
            <button id="daumBtnSearch" class="ico_search btn_search" type="submit"><span class="ir_wa">검색</span></button>
        </div>
    </fieldset>  
</form>
CSS
/* PC전사 이미지 */
.ico_search {background-image:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001)}
 
/* search bar 기본 */
#daumSearch .box_searchbar {float:left;background:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001) no-repeat;background-position:0 0}
#daumSearch .search_on {position:relative;background-position:0 -50px}
#daumSearch .tf_keyword {display:inline;float:left;width:370px;height:18px;margin:11px 10px 0;padding:0;border:0 none;font-weight:bold;font-size:16px;line-height:18px;font-family:'돋움',dotum,sans-serif;background-color:transparent;outline:none}
#daumSearch .btn_search {float:left;overflow:hidden;width:66px;height:39px;border:0 none;background-position:0 -300px;cursor:pointer}
#daumSearch .btn_search:hover  {background-position:-70px -300px}
 
/* search bar 내부검색창 */
#daumSearch .fld_inside {position:relative;width:100%;height:31px}
#daumSearch .fld_inside .box_searchbar {background-position: 0 -200px}
#daumSearch .fld_inside .tf_keyword {width:242px;height:18px;margin:7px 9px 0;font-weight:normal;font-size:12px;line-height:1.5}
#daumSearch .fld_inside .btn_search {width:50px;height:31px;background-position:100% -200px}
#daumSearch .fld_inside .btn_search:hover {background-position:100% -300px}
#daumSearch .fld_inside .bg_on {background:url(http://i1.daumcdn.net/svc/image/U03/common_icon/5265025001055B0001) no-repeat 2px -422px}
#daumSearch .fld_inside .search_on {background-position:0 -250px}
#daumSearch .fld_inside .search_on .btn_search {background-position:100% -250px}
#daumSearch .fld_inside .search_on .btn_search:hover {background-position:100% -300px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기