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 같이 보기[ | ]
로그인하시면 댓글을 쓸 수 있습니다.
- 분류 댓글:
- JsFiddle (2)
- CSS (1)
자바스크립트 HTML 테이블 행 추가/삭제 ― Pilming자바스크립트 HTML 테이블 행 추가/삭제 ― Jmnote