<s_search>
<form class="searchform cf">
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" />
<button onclick="[##_search_onclick_submit_##]">GO</button>
</form>
</s_search>
이런 형태 입니다.
가장 중요한 부분은 <input type="text" ~ ~ ~ ~ /> 이부분 입니다.
꾸미는 방법에 대하여 알아 보겠습니다.
먼저 원하는 스타일을 구글링 합니다.
으로 해보겠습니다.
상세 url 은 여기입니다.
여기부터는 예시이니 하고 싶은 스타일을 직접 찾아서 하시면 됩니다.
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
예시에 나온 form 태그를 티스토리 양식에 맞춰 수정 합니다.
<s_search>
<form class="searchform cf">
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }" />
<button onclick="[##_search_onclick_submit_##]">GO</button>
</form>
</s_search>
그 후 css를 수정해 주시면 됩니다.
본문에 들어가시면 css 가 길게 나오 시는데요.
#searchBox{height:50px}
.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both}
.cf{zoom:1}
.searchform{width:240px;padding:10px;background:#10696f;background:rgba(0,0,0,.2);border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2)}
.searchform input {width:170px;height:10px;padding:10px;line-height:10px;float:left;border:0;background:#eee;border-radius: 3px 0 0 3px}
.searchform input:focus {outline:0;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.8) inset}
.searchform button {overflow:visible;position:relative;float:right;border:0;padding:0;cursor:pointer;height:30px;width:50px;
font: bold 12px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';line-height:30px;color: #fff;background:#d83c3c;border-radius: 0 3px 3px 0;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.searchform button:hover{ackground: #e54040}
.searchform button:active,.searchform button:focus{background:#c42f2f;outline:0}
.searchform button:before {content:'';position:absolute;border-width: 8px 8px 8px 0;border-style: solid solid solid none;border-color: transparent #d83c3c transparent;
top: 8px;left: -6px;}
.searchform button:hover:before{border-right-color: #e54040}
.searchform button:focus:before,.searchform button:active:before{border-right-color: #c42f2f}
.searchform button::-moz-focus-inner {border:0;padding:0}
이런식으로 되겠죠.
다른 소스들은 위의 코드초럼 길지가 않고 대부분 간단한 css , html , 이미지로 구성 되어져 있습니다.
등록안내
