2015년 CSS 네이버 검색창 UI 구현

1 개요[ | ]

CSS 네이버 검색창 구현

기능은 제외하고 간단하게 CSS 스타일만 맞춤
녹색창(span) 내부에 input text가 있고, 버튼은 따로 있는 구조

2 소스 코드[ | ]

html

Copy

<style>
.green_window {
	display: inline-block;
	width: 366px;
	border: 3px solid #2db400;
}
.input_text {
	width: calc( 100% - 14px );
	margin: 6px 7px;
	border: 0;
	font-weight: bold;
	font-size: 16px;
	outline: none;
}
.sch_smit {
	width: 54px; height: 40px;
	margin: 0; border: 0;
	vertical-align: top;
	background: #22B600;
	color: white;
	font-weight: bold;
	border-radius: 1px;
	cursor: pointer;
}
.sch_smit:hover {
	background: #56C82C;
}
</style>

<span class='green_window'>
	<input type='text' class='input_text' />
</span>
<button type='submit' class='sch_smit'>검색</button>

3 같이 보기[ | ]