Snippet 본문

GNB검색창_옵션형

등록
신예호 (등록일 : 2013/12/04)
Type
PC
설명
서비스내에서 사용되는 옵션형 내부검색창
미리보기
Html
<form id="daumSearch" name="daumSearch" action="">
    <fieldset class="fld_inside opt_on"><!--  내부검색 fld_inside 추가 --><!--  내부검색 옵션이 있을경우 opt_on 추가 -->
        <legend class="screen_out">검색어 입력폼</legend>
        <div class="box_searchbar"><!-- 입력창 선택시 search_on 추가  -->
            <!-- 옵션창  -->
            <div id="daumSearchOption" class="opt_search opt_open"><!-- 옵션창 활성화시 opt_open 추가  -->
                <div class="search_option">
                    <label for="selectedOption" class="screen_out">전체</label>
                    <input type="text" value="전체" id="selectedOption" class="tf_opt" readonly="readonly"  onfocus="" />
                </div>
                <a href="#none" class="btn_opt"><span class="ico_search ico_arrow">검색 옵션 보기</span></a>
                <div id="searchOptionLayer" class="layer_opt">
                    <ul class="list_opt">
                        <li class="on"><input type="radio" name="search_opt" id="radAll" class="inp_opt" /><label for="radAll" class="lab_opt">전체</label></li><!-- 선택된 옵션에 on 추가  -->
                        <li><input type="radio" name="search_opt" id="radMovie" class="inp_opt" /><label for="radMovie" class="lab_opt">영화</label></li>
                        <li><input type="radio" name="search_opt" id="radTv" class="inp_opt" /><label for="radTv" class="lab_opt">TV프로그램</label></li>
                        <li><input type="radio" name="search_opt" id="radNews" class="inp_opt" /><label for="radNews" class="lab_opt">뉴스&amp;매거진</label></li>
                    </ul>
                </div>
            </div>
            <!--// 옵션창  -->
            <input type="text" class="tf_keyword" id="qTop" name="q" value="" title="검색어 입력" autocomplete="off" spellcheck="false" />
            <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}
 
/* search bar 옵션이 있을경우 */
#daumSearch .opt_on .tf_keyword {width:158px;margin:7px 5px 0}
#daumSearch .opt_search {float:left;width:92px;height:31px;line-height:14px}
#daumSearch .opt_search .search_option {height:31px}
#daumSearch .opt_search .tf_opt {width:82px;height:18px;margin:7px 0 0 10px;border:0 none;background-color:transparent;outline:none;cursor:pointer}
#daumSearch .opt_search .btn_opt {position:absolute;top:0;left:1px;width:91px;height:31px;;background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)}
#daumSearch .opt_search .ico_arrow {float:right;overflow:hidden;width:10px;height:15px;margin-top:8px;border-right:1px solid #d9d9d9;background-position:0 -350px;text-indent:-9999px}
#daumSearch .opt_search .layer_opt {display:none;overflow:hidden;position:absolute;top:29px;left:0;width:90px;border:1px solid #a5a6ac;border-top:0 none;background-color:#fff}
#daumSearch .opt_search .list_opt {float:left;width:100%;margin-top:1px;padding:2px 0 3px;border-top:1px solid #e8e8ea}
#daumSearch .opt_search .lab_opt {display:block;position:relative;z-index:1;width:100%;padding:5px 0 3px;background-color:#fff;text-indent:9px;cursor:pointer}
#daumSearch .opt_search .inp_opt {position:absolute;width:100%;height:22px;opacity:0;filter: alpha(opacity=0)}
#daumSearch .opt_open .btn_opt {top:0;left:0;width:91px;height:29px;border-top:1px solid #a5a6ac;border-left:1px solid #a5a6ac}
#daumSearch .opt_open .ico_arrow {margin:0;height:29px;border-color:#a5a6ac;background-position:0 -375px}
#daumSearch .opt_open .layer_opt {display:block}
#daumSearch .list_opt li {float:left;width:100%}
#daumSearch .on .lab_opt {font-weight:bold;background-color:#f0f0f0;letter-spacing:-1px}

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