HOWTO · CSS
CSS에서 스타일 선택 드롭다운
이 튜토리얼에서는 CSS에서 드롭다운 메뉴의 스타일을 지정하는 방법을 소개합니다.
이 페이지의 내용
네이티브 HTML select 드롭다운은 상자 모양을 바꾸고 기본 화살표를 CSS로 그린 화살표로 교체해 스타일링할 수 있습니다. 실제 select 요소를 그대로 사용하므로 기본 선택 기능과 키보드 조작도 유지됩니다. 일반적으로는 네이티브 모양을 직접 제거하거나 래퍼로 기본 화살표를 잘라내는 두 가지 방법을 사용합니다.
네이티브 select 드롭다운의 동작을 유지하며 스타일링하기
select에는 option 요소가 들어가며, 브라우저는 플랫폼과 브라우저의 규칙에 따라 컨트롤을 렌더링합니다. CSS로 보이는 상자의 모양은 바꿀 수 있지만, 팝업 목록과 일부 세부 사항은 브라우저와 운영체제에 따라 다를 수 있습니다. 기본 폼 기능과 키보드 조작을 유지하려면 일반 요소로 드롭다운을 다시 만드는 대신 네이티브 요소를 사용하세요.
예제에서는 네 가지 선택 항목을 동일하게 사용합니다. CSS는 화살표가 놓일 오른쪽 공간을 확보하고 키보드 사용자가 알아볼 수 있도록 포커스 윤곽선을 표시합니다. 색상과 크기는 인터페이스에 맞게 조정하세요.
appearance: none으로 네이티브 화살표 숨기고 사용자 지정 화살표 추가하기
지원되는 브라우저에서는 select에 appearance: none을 설정해 네이티브 화살표를 제거한 다음, CSS 그라디언트 두 개로 꺾쇠 모양 화살표를 그릴 수 있습니다. background 레이어는 두 선을 오른쪽 가장자리에 배치하고, 오른쪽 패딩은 선택 항목의 텍스트가 선과 겹치지 않게 합니다. -webkit-appearance와 -moz-appearance 선언은 해당 접두사를 사용하는 엔진을 위한 벤더 접두사 형식이며, WebKit과 Blink 브라우저 계열을 각각 가리키는 것은 아닙니다. 표준 속성을 기본 선언으로 사용하고, 접두사는 브라우저 지원 요건에 필요한 경우에만 유지하세요.
이 페이지는 완성된 정적 브라우저 예제입니다. HTML 파일로 저장해 브라우저에서 열면 컨트롤을 확인할 수 있습니다. 다만 제공된 패킷에는 시각적 결과를 확인했다고 주장할 수 있는 브라우저 렌더링 증거가 없습니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Styled select</title>
<style>
.vehicle-select {
box-sizing: border-box;
width: 220px;
height: 40px;
padding: 0 32px 0 10px;
border: 1px solid #777;
border-radius: 4px;
color: #222;
background-color: #fff;
background-image:
linear-gradient(45deg, transparent 50%, #333 50%),
linear-gradient(135deg, #333 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 9px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
appearance: none;
}
.vehicle-select:focus-visible {
outline: 3px solid #1769aa;
outline-offset: 2px;
}
</style>
</head>
<body>
<label for="vehicle">Choose a vehicle</label>
<select class="vehicle-select" id="vehicle" name="vehicle">
<option>RE Himalayan</option>
<option selected>CRF Rally</option>
<option>GS 310</option>
<option>KTM ADV</option>
</select>
</body>
</html>
잘라내기 래퍼로 네이티브 화살표 숨기기
래퍼를 사용해 네이티브 화살표를 숨길 수도 있습니다. select의 너비를 래퍼보다 약간 넓게 설정하고 래퍼에 overflow를 hidden으로 지정하면 네이티브 화살표가 표시 영역 밖으로 잘립니다. 의사 요소를 사용해 래퍼에 대체 화살표를 그리세요. select가 래퍼 안에 그대로 있으므로 선택 항목과 네이티브 조작 기능은 계속 사용할 수 있습니다.
컨트롤의 텍스트가 들어갈 만큼 래퍼를 넉넉하게 만들고, select는 래퍼보다 조금만 넓게 설정하세요. 너비 차이가 너무 크면 컨트롤의 오른쪽 테두리나 다른 내용까지 잘릴 수 있습니다. 의사 요소에는 pointer-events: none을 적용해 select를 클릭할 때 이를 가로채지 않도록 합니다.
래퍼 예제에서는 select가 래퍼보다 20픽셀 더 넓습니다. 다음의 간단한 JavaScript 검사는 이 너비 관계를 명시적으로 확인합니다.
이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.
const wrapperWidth = 200;
const selectWidth = 220;
if (selectWidth <= wrapperWidth) {
process.exitCode = 1;
}
select가 래퍼보다 넓으면 검사가 성공적으로 끝나고, 그렇지 않으면 실패 종료 코드를 설정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select with clipped arrow</title>
<style>
.select-wrap {
position: relative;
box-sizing: border-box;
width: 200px;
height: 42px;
overflow: hidden;
border: 1px solid #777;
border-radius: 4px;
background: #fff;
}
.select-wrap select {
box-sizing: border-box;
width: 220px;
height: 40px;
padding: 0 10px;
border: 0;
color: #222;
background: transparent;
font: inherit;
}
.select-wrap::after {
position: absolute;
top: 18px;
right: 12px;
width: 7px;
height: 7px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
content: "";
pointer-events: none;
transform: rotate(45deg);
}
.select-wrap:focus-within {
outline: 3px solid #1769aa;
outline-offset: 2px;
}
</style>
</head>
<body>
<label for="vehicle">Choose a vehicle</label>
<div class="select-wrap">
<select id="vehicle" name="vehicle">
<option>RE Himalayan</option>
<option selected>CRF Rally</option>
<option>GS 310</option>
<option>KTM ADV</option>
</select>
</div>
</body>
</html>
방법을 선택하고 한계 확인하기
select 자체의 너비와 테두리를 지정하고 대상 브라우저가 필요한 스타일을 지원한다면 appearance: none을 사용하세요. 래퍼 수준에서 화살표를 배치해야 하거나 직접 모양을 바꾸기 어려운 경우에는 잘라내기 래퍼를 사용하세요. 어느 방법을 선택하든 지원 대상인 브라우저와 기기에서 페이지를 확인하세요. 네이티브 select의 렌더링과 팝업 메뉴는 모든 환경에서 동일하지 않습니다.
선택된 값 전체가 보이는지, 사용자 지정 화살표가 올바르게 정렬되었는지, 키보드 포커스를 쉽게 확인할 수 있는지 점검하세요. 래퍼 방식에서 테두리나 텍스트가 잘려 보이면 래퍼와 select의 너비를 비교하세요. 컨트롤을 깔끔하게 보이게 하려고 포커스 표시를 제거하지 마세요. 스타일을 바꾼다면 그만큼 뚜렷한 표시를 대신 제공하세요. 이 방법들은 표시 방식만 바꾸며 선택과 폼 동작은 네이티브 select가 계속 담당합니다.
