2nd/10_Wiki/Dev/Topic_HOWTO/HOWTO_CSS_Search_Button.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
howto-css-search-button	How To - Search Button	Web_Recipes	draft	conceptual		search bar with icon button CSS		B	0.81	2026-07-04	2026-07-04			howto css w3schools buttons forms	https://www.w3schools.com/howto/howto_css_search_button.asp

HOWTO CSS Search Button

🎯 한 줄 통찰 (One-line insight)

border-left: none; on the button reuses the EXACT double-border fix already established for adjacent buttons in [[HOWTO CSS Button Group]]'s :not(:last-child) pattern — here applied to just TWO elements (a text input and a button, both floated and both bordered) sitting flush against each other, where an 80%/20% width split ensures the input dominates visually while the icon button stays compact. [S1]

🧠 핵심 개념 (Core concepts)

• float: left on both input and button — width: 80% for the search input, width: 20% for the button, summing to 100% — same N-column formula pattern as the layout recipes. [S1]
• border-left: none on the button — prevents a doubled border where the input's right edge meets the button's left edge, the same principle as the button group's :not(:last-child) fix, just applied between two DIFFERENT element types rather than a repeated list of buttons. [S1]
• form::after clearfix — the standard clearfix, needed because both children are floated. [S1]

📖 세부 내용 (Details)

• form.example input[type=text] { float: left; width: 80%; } form.example button { float: left; width: 20%; border-left: none; } form.example::after { content: ""; clear: both; display: table; }. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

• 버튼 그룹의 이중 테두리 제거 원리가 다른 요소 조합에도 적용됨: [[HOWTO CSS Button Group]]의 :not(:last-child) { border-right: none; }이 반복되는 버튼들 사이의 이중 테두리를 막았다면, 이 레시피는 input과 button이라는 서로 다른 두 요소 사이의 접합부에 동일한 원리(border-left: none)를 적용한다는 점이 확인됨. [S1]

🛠️ 적용 사례 (Applied in summary)

검색어 입력창(80%)과 돋보기 아이콘 버튼(20%)을 이중 테두리 없이 하나로 이어붙인 검색 폼 예제가 원문에서 직접 제시됨. [S1]

💻 코드 패턴 (Code patterns)

Search input + button joined without a doubled border (CSS):

form.example input[type=text] { float: left; width: 80%; border: 1px solid grey; }
form.example button { float: left; width: 20%; border: 1px solid grey; border-left: none; }
form.example::after { content: ""; clear: both; display: table; }

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual
• 출처 신뢰도: B (W3Schools — widely used educational reference)
• 신뢰 점수: 0.81
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: W3Schools HOW TO
• 관련 개념: HOWTO CSS Button Group, HOWTO CSS Searchbar, HOWTO JS Search Menu
• 참조 맥락: CSS Buttons 섹션의 마지막 두 챕터 중 하나 — Sidenav Buttons로 이어짐.

📚 출처 (Sources)

• [S1] W3Schools — How To - Search Button — https://www.w3schools.com/howto/howto_css_search_button.asp

📝 변경 이력 (Change history)

• 2026-07-04: Initial draft synthesized from the W3Schools "How To - Search Button" recipe (Astra wiki-curation, P-Reinforce v3.1 format).