10가지 무료 CSS 및 JavaScript 선택 상자 스니펫

기본 HTML 선택 상자는 수십 년 동안 우리에게 도움이 되었습니다. 그러나 현대 시대에는 그것들이 조금... 부실하다고 말하는 것이 공평합니다.

디자이너는 더 나은 작업을 수행할 수 있으며 CSS의 발전 덕분에 선택 상자를 쉽게 사용자 지정할 수 있습니다. 온라인에서 무료로 제공되는 모든 오픈 소스 코드는 말할 것도 없습니다.

수제 셀렉트 박스 스타일에 대한 상위 10개 선택 컬렉션을 선별했습니다. 이들은 플러그인으로 출시되지 않고 대신 JavaScript 및 CSS 사용자 정의를 위한 템플릿에 의존합니다. 그러나 그들은 모두 설정하기 쉽고 자신의 목적에 맞게 스타일을 다시 지정할 수도 있습니다.

1. 사용자 지정 선택 메뉴

컬렉션의 시작은 Wallace Erick의 맞춤 선택 메뉴 스타일입니다.

스타일 변경을 위한 CSS와 메뉴의 UX 구성을 위한 JavaScript를 모두 사용합니다. 그것들은 표준 HTML 선택과 약간 다르게 작동하며 사용하기에 조금 더 좋다고 생각합니다.

메뉴의 크기와 색상 스타일을 선택하거나 Wallace의 기본값으로 작업할 수 있습니다. 무엇보다도 그는 사용자 정의 업로드 필드 디자인을 포함하고 있습니다. 이 디자인은 스타일 변경을 시도한 적이 있다면 그것이 어렵다는 것을 알게 될 것입니다.

깨끗하면서도 신선하게 작동하는 선택 메뉴를 원하신다면 시작하기 좋은 곳입니다.

2. 단순 선택

다음은 모든 레이아웃에 더 자연스럽게 혼합되는 것을 목표로 하는 또 다른 매우 간단한 선택 상자입니다.

이것은 평범한 흑백 색 구성표와 함께 더 미묘한 색상에 의존합니다. 그러나 JavaScript를 사용하여 선택 메뉴를 표시하거나 표시하지 않을 수도 있습니다.

선택 필드 처럼 작동하는 숨겨진 입력 필드를 대상으로 하여 작동합니다. 이 솔루션은 기술적으로 실제 <select> 요소를 사용하지 않기 때문에 이렇게 하면 여전히 프런트엔드에서 양식으로 데이터를 가져올 수 있습니다.

호환성이 문제라면 이 문제를 건너뛰십시오. 그러나 디자인이 훌륭하고 데스크탑 트래픽에 완벽할 것이라는 점을 인정해야 합니다.

3. 재미없는 HTML 드롭다운

이름에서 알 수 있듯 이 엄선된 메뉴 팩은 그냥 지나치지 않도록 하는 것을 목표로 합니다. 그들은 모두 다양한 스타일과 크기를 가지고 있으며 버튼을 클릭하여 필요에 따라 색상을 변경할 수 있습니다.

분명히 귀하의 레이아웃에서 해당 기능을 제거하고 귀하의 사이트에 적합한 하나의 구성표를 고수할 수 있습니다. 그러나 전반적으로 이러한 선택 메뉴는 일반 메뉴처럼 작동하며 사용하기 좋습니다.

호환성이 걱정된다면 이 템플릿으로 작업하는 것을 고려하십시오.

대부분의 변경 사항은 외형적이므로 사용자 행동에 큰 영향을 미치지 않습니다.

4. 자리 표시자 선택

이 자리 표시자 선택 메뉴의 실제 디자인은 화려하지만 디자인이 유일한 요소는 아닙니다.

개발자 James Nowland는 선택 항목에서 기본값을 제거하기 위해 이 메뉴를 만들었습니다. 즉, 필드가 비어 있을 때 표시되는 텍스트 필드의 자리 표시자처럼 작동하지만 값을 설정하면 사라집니다.

완전히 호환되며 실제 HTML 선택 요소와 함께 작동합니다. 옵션 필드는 사용자가 선택 항목을 선택할 때마다 기본적으로 숨겨집니다. 이렇게 하면 드롭다운 메뉴에서 "옵션 선택" 텍스트가 표시되지 않습니다. 정말 창의적인 솔루션!

5. 평면 디자인

미학은 웹 디자인에서 종종 중요하며 이 평면 선택 메뉴가 좋은 예입니다.

여전히 일반적인 선택처럼 작동하며 드롭다운 부분은 전혀 변경되지 않았습니다. 그러나 선택 자체의 스타일을 변경하는 것만으로도 페이지가 활기를 띠게 됩니다. 못생긴 브라우저 기본값보다 훨씬 고급스럽게 느껴집니다.

이 템플릿을 사용하여 드롭다운 영역에 적용된 자신만의 플랫 스타일로 확장할 수도 있습니다. 완전히 당신의 전화!

그러나 시작 템플릿으로서 이것은 모든 인터페이스에 대한 가장 간단한 선택 중 하나입니다.

6. 순수 CSS

저는 JavaScript보다 순수한 CSS가 전체 디자인 프로세스를 단순화하기 때문에 열렬한 팬입니다. 쉽지는 않지만 솔루션이 너무 많습니다.

내가 가장 좋아하는 것 중 하나는 순수한 CSS 선택 메뉴뿐만 아니라 라디오와 체크박스도 포함하는 이 스니펫입니다.

그들 모두는 경이적으로 보이며 모든 유형의 레이아웃과 조화를 이루어야 합니다. CSS에서 편집할 수 있는 모든 권한이 있으며 이 모든 것 중 가장 좋은 것은 모든 주요 브라우저에서도 작동해야 합니다.

7. 스타일이 지정된 액세스 가능한 드롭다운

다음은 선택 메뉴로 수행할 수 있는 작업에 대한 보다 양식화된 예 중 하나입니다. Andy Fitzsimon이 만든 이 스니펫은 드롭다운 효과를 위해 JavaScript를 사용하고 그라디언트 및 화살표 아이콘에 맞춤 CSS를 사용합니다.

좋은 점은 이 메뉴가 no-JS 기능도 지원하므로 JavaScript가 비활성화된 경우에도 작동한다는 것입니다. 이를 우아한 저하라고 하며 접근성에 대한 웹 개발자의 가장 친한 친구입니다.

여전히 이러한 선택 메뉴는 2017년 이후의 디자인에 맞지 않을 수 있는 구식 웹 2.0 그라디언트를 실행합니다.

그러나 이것은 약간의 창의성으로 원하는 곳 어디에서나 선택 메뉴를 가져올 수 있음을 보여줍니다. 그리고 CSS를 해킹하여 약간 사용자 정의하면 놀랍게도 잘 작동할 수 있습니다.

8. SVG 아이콘 메뉴

기본 선택 메뉴에는 측면에 화살표 아이콘이 있고 그 외에는 별로 없습니다. 약간의 SVG 마법으로 이것을 원하는 다른 아이콘으로 변환할 수 있습니다.

이 사용자 정의 메뉴에는 순수 SVG 파일로 실행되는 자체 플러스 아이콘 디자인이 있습니다. 메뉴를 클릭하여 확장하면 닫기/숨기기를 위한 X 아이콘으로 움직입니다.

나는 이와 같은 것을 본 적이 없으며 우리가 웹 브라우저의 한계를 뛰어 넘은 정도를 보여줍니다.

불행히도 이것은 기본 HTML 선택 요소에서 실행 되지 않습니다 . div 내부의 목록 항목 모음이므로 값이 선택될 때마다 숨겨진 입력 필드를 대상으로 해야 합니다.

고맙게도 그 과정은 정말 쉽기 때문에 이 디자인을 사이트에 적용하고 싶다면 많은 노력이 필요하지 않을 것입니다.

9. 선택 상자 실험

여기 내 눈을 사로잡은 실험적인 디자인이 있습니다. 비교 데모 화면은 이것이 일반 선택 메뉴와 얼마나 다른지 그리고 사용자 경험을 어떻게 변경하는지 보여줍니다.

처음 탭/클릭하여 메뉴를 열면 전체 애니메이션 효과와 함께 아래로 미끄러집니다. 그러나 페이지의 다른 곳을 클릭하면 숨겨지는 일반적인 선택 메뉴와 달리 메뉴를 다시 클릭하지 않는 한 숨겨지지 않습니다.

단순한 애니메이션으로 깔끔한 디자인의 정말 좋은 예입니다. 그러나 누락된 클릭하여 숨기기 기능이 마음에 들지 않는다면 이것은 거래 차단기일 수 있습니다.

10. 다크 & 라이트 셀렉트

순수한 CSS도 사랑하고 매끄러운 선택을 원하는 경우 이 솔루션을 확인하고 그 중 하나를 시작 템플릿으로 사용해 보십시오.

둘 다 배경에 대해 CSS 그라디언트에 의존하고 드롭다운 메뉴를 그라디언트의 낮은 색상과 혼합합니다. 이것은 JavaScript 플러그인을 사용하지 않으므로 약간의 CSS와 약간의 창의적인 노력으로 이 작업을 수행할 수 있습니다.

CSS 자체는 매우 복잡하므로 언어에 대해 알고 있으면 도움이 됩니다. 그러나 출발점으로 이것은 최고의 선택 중 하나이며 사용자 정의의 여지도 많이 남깁니다.