웹페이지 사용자 정의 선택 상자 Select_HTML/Xhtml_웹페이지 제작

선택 드롭다운 목록 형식은 누구나 익숙하겠지만 기본 드롭다운 목록 형식은 일부 웹사이트를 보기 흉하게 만드는 경우가 많고 CSS를 사용하여 선택 스타일을 조정하는 것도 어렵습니다. 따라서 많은 웹사이트에서는 웹사이트 스타일에 더 잘 맞는 선택 드롭다운 양식을 만들기 위해 JS를 사용하여 이 효과를 시뮬레이션하는 경우가 많습니다.

예를 들어 우리에게 매우 친숙한 Tudou, Taobao Mall 및 Amazon은 모두 JS를 사용하여 드롭다운 목록 양식을 만듭니다.

이 결과는 확실히 웹사이트의 전체적인 스타일과 시각적으로 통일되어 있고, 드롭다운 목록 스타일이 매우 아름답지만 JS로 이루어졌기 때문에 예상치 못한 많은 반응을 불러일으킬 수도 있습니다. , 세 개의 테스터 웹사이트를 통해 각각의 결함을 하나씩 분석해 보겠습니다.

감자의 검색 카테고리 선택 상자는 클릭할 때마다 기분이 이상해요.

1. 클릭 후 팝업 목록 위치가 예상과 다릅니다. 무의식적으로는 드롭다운 목록이었는데, 투도가 나에게 '미드드롭 목록'을 줬다.
2. 습관적으로 위/아래 키를 사용해 선택하는데 전체 페이지가 스크롤됩니다.
3. 화가 나서 문을 닫고 싶어요. ESC 키를 누르면 아무 일도 일어나지 않습니다.
4. JS를 비활성화한 후에는 완전히 사용할 수 없습니다.

마찬가지로 타오바오몰도 예뻐요:

1번 점을 제외하고 나머지는 모두 Potato와 동일하며 접근성 및 사용성 문제가 있습니다.

해결책은 매우 간단합니다. Amazon:

과 같은 기본 선택 상자를 사용하면 됩니다.

웹페이지에서 사용자 정의 선택 상자를 사용하지 않는 이유는 무엇입니까?

선택 선택 상자는 매우 성숙한 대화형 컨트롤입니다. 성숙함은 사용자가 쉽게 수용할 수 있다는 것을 의미하지만, 성숙함은 모든 종류의 사용자가 신중하게 고려되고 매우 풍부한 상호 작용 세부 사항을 가지고 있음을 의미합니다. 예: PgUp/PgDn, Home/End 등과 같은 키보드 조작에 대한 응답, 다양한 위치에서 드롭다운 목록의 팝업 방향을 자동으로 조정하는 기능 등.

JS를 사용하여 선택 상자를 시뮬레이션하려면 많은 작업과 신중한 테스트가 필요합니다. 회사가 투자할 의향이 있더라도 여전히 기본 컨트롤의 일부 기능을 구현할 수 없습니다. 예를 들어 위의 Amazon 선택 상자에서 브라우저를 매우 낮게 당긴 다음 드롭다운 목록을 브라우저 밖으로 확장할 수 있습니다.

약간 "시각적 디저트"를 위해 상호 작용에서 너무 많은 실제적인 세부 사항이 손실되고 프런트 엔드 프로그래머의 시간이 많이 소비되어야 합니다. 그 결과는 정말 안타깝습니다.

PS: 사용자 정의 선택 상자를 사용하려면 다음 조건을 충족해야 합니다.

1. Google만큼 열성적이고 많은 시간과 자원을 기꺼이 소비합니다.
2. 구글처럼 꼼꼼하게 하고 싶으면 잘 하세요.
3. 웹앱으로 신청하세요.

안타깝게도 중국에는 구글이나 페이스북만큼 미친 기업과 꼼꼼한 기업이 아직 등장하지 않았습니다.