CSS로 검색창 디자인하기

오늘은 CSS에서 배경 이미지를 사용하여 검색창을 디자인하는 방법을 소개하겠습니다. 이전에 다른 방법을 사용하여 양식과 검색창을 구현한 적이 있지만 이 방법이 더 쉬울 것 같아서 관심 있는 분들과 공유하고 싶다고 생각했습니다.

데모

원래 방법 보기 먼저 을 사용하는 원래 방법을 살펴보겠습니다.

원래 방법

개선된 버전의 방법에서는 type="image"를 사용하지 않고 태그를 사용한 다음 CSS를 사용하여 배경을 추가하기로 결정했습니다. 이렇게 하면 텍스트 입력 상자와 버튼이 자동으로 정렬됩니다. 또한 최종 효과에 :focus 의사 클래스를 추가했습니다(IE는 이를 지원하지 않으므로 이 효과를 숨기기 위해 IE용 특수 스타일을 추가했습니다). 이 접근 방식의 몇 가지 이점은 다음과 같습니다.

버튼과 입력 필드에 하나의 이미지만 사용하여 자연스러운 정렬
:focus 의사 클래스는 버튼에 호버 효과를 추가하는 브라우저를 지원합니다.

HTML

http://www.sohtanaka.com/ ">
<필드셋 클래스="검색">
<입력 유형="텍스트" 클래스="상자" />

검색

CSS

fieldset.search {
테두리: 없음;
너비: 243px;
여백: 0 자동;
배경: #222;
}
.search 입력, .search 버튼 {
테두리: 없음;
플로트: 왼쪽;
}
.검색 입력.박스 {
색상: #fff;
글꼴 크기: 1.2em;
너비: 190px;
높이: 30px;
패딩: 8px 5px 0;
배경: #616161 url(search_bg.gif) 반복 없음;
오른쪽 여백: 5px;
}
.search input.box:focus {
배경: #616161 url(search_bg.gif) 반복 없음 왼쪽 -38px;
개요: 없음;
}
.검색 버튼.btn {
너비: 38px;
높이: 38px;
커서: 포인터;
텍스트 들여쓰기: -9999px;
배경: #fbc900 url(search_bg.gif) 오른쪽 상단 반복 없음;
}
.검색 버튼.btn:hover {
배경: #fbc900 url(search_bg.gif) 오른쪽 하단 반복 없음;
}IE 특별 설명

IE 스타일-ie.css
친구가 IE6, IE7에서는 텍스트를 너무 많이 입력하면 배경 이미지가 가로로 스크롤된다고 하더군요. 그래서 저는 IE 전용으로 별도의 배경 이미지를 사용하고 왼쪽으로 정렬하는 대신 뒤집어서 배경을 정렬했습니다. 이 문제를 해결하려면 오른쪽에 있는 이미지를 클릭하세요.

.검색 입력.박스 {
배경: url(search_bg_ie.gif) 오른쪽 하단 반복 없음;
/* 특히 IE용 독립 배경 이미지이며 이 이미지는 오른쪽 정렬되어야 합니다. ***/
}