javascript_form 효과를 사용하여 선택을 아름답게 만드는 방법

포럼에서 CSS를 사용하여 Select 태그를 아름답게 만드는 방법을 묻는 경우가 많습니다. 실제로 보이는 모든 멋진 작업은 JavaScript를 사용하여 수행됩니다. 어제 시도해보고 기본적으로 기본 기능을 구현했습니다. 꺼내서 모두와 공유해보세요. 먼저 미리보기 효과를 살펴보실 수 있습니다: http://www.iwcn.net/demo/select.
【기능적 요구 사항】
1. 호출이 편리해야 합니다.

코드 복사 코드는 다음과 같습니다.

function loadSelect(selectobj){
//선택 개체를 전달하면 스타일이 아름다워질 수 있습니다.
}

2. 아니요 양식의 페이지 코드를 손상시키지 않고 원본 양식 항목을 변경합니다.

코드 복사 코드는 다음과 같습니다.

>                                    > 양식>


[구현 아이디어]

1단계: 양식에서 선택 항목을 숨깁니다.
왜요? 이 사람은 너무 완고해서 CSS를 사용하여 원하는 것을 얻을 수 없기 때문에 간단합니다. 그러니 죽여라.

2단계: 스크립트를 사용하여 웹페이지에서 select 태그의 절대 위치를 찾습니다.
우리는 DIV 태그를 사용하여 해당 위치에 그의 대리인 역할을 할 더 보기 좋은 가짜 태그를 만듭니다.

3단계: 스크립트를 사용하여 선택 태그의 값을 읽습니다.
숨겨져 있어도 그 안의 옵션을 사용할 수 있으니 다 가져갈 수 있습니다.

4단계: 사용자가 선택 태그의 아바타인 div를 클릭할 때. 다른 div를 사용하여 이전 div 아래에 떠 있습니다. 이는 옵션을 대신하는 것입니다.

대략 이쯤 됐으니 차근차근 구현해보자!

【준비】
1. 셀렉션을 어떻게 아름답게 만들고 싶은지 생각하고 해당 사진을 준비합니다. 작은 그림 2개를 준비했는데, 드롭다운 화살표 1과 드롭다운 화살표 2입니다. 1은 기본 스타일이고 2는 마우스를 올렸을 때의 스타일입니다.
2. 아래와 같은 공통 양식 제출 페이지를 작성합니다. 참고로 select에 대한 기본 CSS 스타일을 정의하고, 헤드에 js 파일을 호출하는 코드를 추가하고, 바디에 함수를 호출하는 스크립트를 추가했습니다.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title>