순수 CSS를 사용한 사용자 지정 선택 스타일

이것은 제가 해결 한 문제에 대한 최신 CSS 솔루션을 검토하는 시리즈의 에피소드 # 20입니다. 지난 13 년 이상 프런트 엔드 개발자로 활동했습니다.

최신 CSS는 거의 동일한 사용자 지정 선택 스타일을 얻을 수있는 다양한 속성을 제공합니다. 최상위 브라우저에서 단일, 다중 및 비활성화 된 select 요소의 초기 모양.

솔루션에서 사용할 몇 가지 속성 및 기술 :

• clip-path 사용자 지정 드롭 다운 화살표 만들기
• 기본 선택 및 화살표를 정렬하기위한 CSS 그리드 레이아웃
• 유연한 스타일 지정
• em 상대적 크기 조정 단위

기본 선택의 일반적인 문제 #

모든 양식 필드 유형과 마찬가지로 <select>는 초기 모양이 브라우저마다 다릅니다.

다음은 Firefox, Chrome, Safari에서 <select>의 초기 모습입니다.

차이점에는 상자 크기, 글꼴 크기, 줄 높이가 포함되며 가장 두드러진 점은 드롭 다운 표시기 스타일의 차이입니다.

우리의 목표는 여러 선택 및 비활성화 상태를 포함하여 이러한 브라우저에서 동일한 초기 모양을 만드는 것입니다.

참고 : 드롭 다운 목록은 여전히 스타일을 지정할 수 없습니다. 따라서 <select>가 열리면 option 목록에 대한 개별 브라우저의 스타일을 계속 선택합니다. 괜찮습니다. 기본 선택 항목의 무료 접근성을 유지하기 위해 처리 할 수 있습니다.

기본 HTML #

우리 ” 시작하려면 단일 <select>에 초점을 맞 춥니 다.

라벨은 스타일링 연습의 일부가 아니지만 일반적인 요구 사항으로 포함되며 특히 iv <select>에서 id 값을 갖는 id = “c5b12787e0”> 속성입니다.

사용자 정의 스타일을 수행하기 위해이 자습서에서는 단순성을 위해 select 클래스를 사용하여 추가 div에 기본 선택을 래핑했습니다.

상속 된 스타일 재설정 및 제거 #

최신 모범 사례로 모든 자습서에 포함되어 있으므로 먼저 다음 재설정을 추가합니다.

그 뒤에, 네이티브 select에 대한 규칙을 시작하고 다음을 적용하여 모양을 멈출 수 있습니다.

대부분의 경우 익숙 할 수 있지만 이상한 결과는 . 이 속성은 자주 사용되지 않으며 “지원을 원하는 위치가 아니지만이 경우 기본적으로 제공되는 것은 기본 브라우저 드롭 다운 화살표가 제거 된 것입니다.

참고 : CodePen은 appearance 속성의 필수 접두어 버전을 추가하는 autoprefixer를 사용하도록 설정되었습니다. 프로젝트에 대해 특별히 설정하거나 수동으로 추가해야 할 수 있습니다. 내 HTML / Sass Jumpstart에는 프로덕션 빌드의 일부로 자동 접두사가 포함되어 있습니다.

좋은 소식은 필요한 경우 하위 IE 버전의 화살표를 제거하는 규칙을 하나 더 추가 할 수 있다는 것입니다.

이 팁은 선택 스타일을 만드는 대체 방법을 보여주는 Filament Group의 훌륭한 기사입니다.

마지막 부분은 기본 outline를 제거하는 것입니다. 걱정하지 마세요. 나중에 :focus state!

여기에 우리의 진행 상황에 대한 gif가 있습니다. 클릭하기 전에 select라는 시각적 표시가없는 것을 볼 수 있습니다.

사용자 정의 선택 상자 스타일 #

먼저 CSS 변수를 설정해 보겠습니다. 이렇게하면 선택 항목을 오류 상태를 나타내는 것과 같이 유연하게 색상을 변경할 수 있습니다.

접근성 참고 : 사용자 인터페이스 요소로서 선택 테두리는 3 : 1 대비를 가져야합니다. 주변 표면 색상보다 더 큽니다.

이제 래핑에 적용 할 사용자 지정 선택 스타일을 만들 차례입니다. div.select :

먼저 너비 제한을 설정했습니다. min-width 및 max-width 값은 대부분이 데모 용이며 사용 사례에 따라 값을 삭제하거나 변경할 수 있습니다.

그런 다음 border, border-radius 및 padding. 이러한 속성을 font-size 집합에 비례하게 유지하는 em 단위를 사용합니다.

재설정 스타일에서 여러 속성을 inherit로 설정 했으므로 여기서는 font-size를 포함한 속성을 정의합니다. cursor 및 line-height.

마지막으로 약간의 그라데이션을 포함한 배경 속성을 제공합니다. 치수. 배경 속성을 제거하면 선택 항목이 투명 해지고 페이지 배경이 선택됩니다. 그러나 이것이 바람직 할 수 있지만 대비에 미치는 영향을 인식하고 테스트하십시오.

진행 상황은 다음과 같습니다.

사용자 지정 드롭 다운 화살표 # 선택

드롭 다운 화살표에는 가장 흥미로운 최신 CSS 속성 중 하나 인 clip-path를 사용합니다.

클립 경로를 사용하면 대부분의 요소에서 기본값으로받는 정사각형 및 직사각형 모양을 “잘라 내기”하여 모든 종류의 모양을 만들 수 있습니다. 최근 포트폴리오 사이트 재 설계에서 clip-path를 사용하는 것이 즐거웠습니다.

clip-path 더 나은 지원을 받기 전에는 다음과 같은 대체 방법이 포함되었습니다.

• background-image-일반적으로 PNG, 약간 더 현대적인 것은 SVG입니다.
• 추가 요소로서의 인라인 SVG
• 삼각형을 만드는 테두리 트릭

SVG는 최적의 솔루션처럼 느껴질 수 있지만 background-image로 사용하면 아이콘처럼 작동 할 수 없다는 의미에서 손실됩니다. o 완전히 재정의하지 않고 채우기 색상과 같은 속성을 변경합니다. 이는 CSS 맞춤 변수를 사용할 수 없음을 의미합니다.

SVG를 인라인으로 배치하면 fill 색상 문제가 해결되지만

가 정의되어 있습니다.

clip-path를 사용하면 SVG처럼 느껴지는 선명하고 확장 가능한 화살표 “그래픽”을 얻을 수 있습니다. 맞춤 변수를 사용할 수 있고 HTML 마크 업과 비교하여 스타일에 포함될 수 있다는 이점이 있습니다.

화살표를 만들기 위해 화살표를 ::after pseudo-element.

clip-path 구문은 약간 이상합니다. 이 기사의 초점이 아니므로 다음 리소스를 권장합니다.

• Colby Fayock은이 지식인 비디오에서 예제와 함께 구문을 설명합니다.
• Clippy는 다음을 허용하는 온라인 도구입니다. clip-path CSS

다음에 해당하는 경우 모양을 선택하고 점을 조정해야합니다. 날개를 따라 가면 width 및 height를 정의 했음에도 화살표가 나타나지 않는 것을 알 수 있습니다. 검사 결과 ::after가 실제로 허용되지 않는 것으로 확인되었습니다.

를 사용하여 CSS 그리드 레이아웃을 사용합니다.

이렇게하면 기본적으로 “차단”과 유사한 표시 값을 확장하여 화살표가 표시됩니다.

이 단계에서 실제로 삼각형이 생성되었는지 확인할 수 있습니다.

정렬을 수정하려면 우리는 제가 가장 좋아하는 CSS 그리드 해킹을 사용할 것입니다 (여기에서 몇 가지 기사를 읽었다면 오래된 모자입니다!).

이전 CSS 솔루션 : position: absolute 새로운 CSS 솔루션 : 모두를 포함하는 단일 grid-template-areas

먼저 영역을 정의한 다음 select 및 ::after 모두 사용합니다. 이름은 생성 된 요소로 범위가 지정되며 “select”라고 부르면 쉽게 유지할 수 있습니다.

소스 순서를 통한 스택 컨텍스트로 인한 네이티브 선택 위의 화살표 :

이제 그리드 속성을 사용하여 정렬을 완료 할 수 있습니다. 각 요소 :

따-다!

: focus State #

예-outline를 어떻게 제거했는지 기억하십니까? 누락 된 :focus 상태를 삭제합니다.

:focus-within라는 곧 사용할 수있는 속성이 있지만 여기에 폴리 필을 포함하는 것이 가장 좋습니다. 시간.

이 자습서에서는 동일한 결과를 얻는 대체 방법을 사용합니다. 약간 더 무겁습니다.

불행하게도 이는 하나 이상의 요소를 추가해야 함을 의미합니다. DOM.

네이티브 선택 요소 뒤에 마지막으로 .select 내의 하위 항목 인 경우 다음을 추가하십시오.

왜 이후입니까? 이것은 순수한 CSS 솔루션이기 때문에 네이티브 선택 뒤에 배치한다는 것은 select가 인접한 형제 선택기 (.

이렇게하면 다음 규칙을 만들 수 있습니다.

position: absolute로 돌아가는 이유가 궁금 할 수 있습니다. div> 이전 grid-area 해킹을 배운 후.

이유는 패딩을 기준으로 조정을 다시 계산하지 않기 위해서입니다. 직접 시도해 보면 width 및 height를 100 %로 설정해도 여전히 안쪽 여백 안에 있음을 알 수 있습니다. .

position: absolute가 가장 잘하는 일은 요소의 크기를 일치시키는 것입니다. 테두리와 겹치도록 각 방향으로 추가 픽셀을 가져옵니다. 속성입니다.

하지만 .select에 하나 더 추가하여 선택 기준과 관련이 있는지 확인해야합니다. position: relative.

다음은 Chrome에서 볼 수있는 맞춤 선택 항목입니다.

Multiple Select #

Select는 두 번째 버전으로 제공되며 사용자가 둘 이상의 옵션을 선택할 수 있습니다. HTML 관점에서 이것은 단순히 multiple 속성을 추가하는 것을 의미하지만 select--multiple라는 스타일 조정을 만드는 데 도움이되는 클래스도 추가합니다. :

이 뷰에서 화살표가 필요하지 않다는 점을 제외하면 대부분의 스타일이 유리하게 상속 된 것을 볼 수 있습니다.

화살표를 정의하는 선택기를 조정하는 빠른 수정입니다. :not()를 사용하여 새로 정의 된 클래스를 제외합니다.

다중 선택을 위해 몇 가지 사소한 조정이 있습니다. 첫 번째는 화살표를위한 공간을 만들기 위해 이전에 추가 된 패딩을 제거하는 것입니다.

기본적으로 긴 값을 가진 옵션은 표시 영역을 오버플로하고 잘리지 만 원하는 경우 기본 브라우저에서 래핑을 재정의 할 수 있음을 발견했습니다.

선택적으로 선택 항목에 height를 설정하여 좀 더 안정적인 크로스 브라우저 동작입니다. 이 테스트를 통해 Chrome과 Firefox는 부분 옵션을 표시하지만 Safari는 완전히 볼 수없는 옵션을 완전히 숨 깁니다.

높이는 기본 선택에서 직접 설정해야합니다. . 다른 스타일을 고려할 때 6rem 값은 3 가지 옵션을 표시 할 수 있습니다.

이 시점에서 현재 브라우저 지원으로 인해 최대한 많이 조정했습니다.

:selected 상태 의 options는 Chrome에서, 다소 Firefox에서 사용자 정의가 가능하며 Safari에서는 전혀 사용할 수 없습니다. 주석을 제거 할 수있는 섹션은 CodePen 데모를 참조하십시오.

: disabled Styles #

비활성화 된 컨트롤을 표시하지 않고 기본을 덮기 위해 해당 상태의 스타일을 준비해야합니다.

비활성화 된 상태를 강조하기 위해 회색 배경을 적용하려고합니다. 그러나 .select에 배경 스타일을 설정했고 “:parent 선택기가 없기 때문에 처리 할 마지막 클래스를 하나 만들어야합니다. 이 상태 :

여기서는 필드가 상호 작용할 수 없다는 추가 힌트로 커서를 업데이트하고 이전에 설정 한 배경 값을 업데이트했습니다. 이제 비활성화 된 상태에 대해 더 회색이되도록 흰색이됩니다.

결과적으로 다음과 같은 결과가 나타납니다.

Demo #

직접 테스트 할 수 있지만 여기에서 Firefox, Chrome 및 Safari (왼쪽부터) 전체 솔루션을 미리 볼 수 있습니다.

작성자 : Stephanie Eckles (@ 5t3ph)