728x90
<select> 요소는 기본적으로 브라우저마다 다르게 스타일링되기 때문에, CSS로 직접 스타일을 적용해 select 박스의 외관을 커스터마이징할 수 있습니다. 하지만 <select> 요소는 완벽하게 커스터마이징하기 어려운 부분이 있습니다. 기본적인 스타일 변경은 가능하나, 완벽히 통제하려면 JavaScript와 함께 커스텀 UI를 만들어야 합니다.
그래도 CSS로 할 수 있는 몇 가지 방법을 소개합니다.
기본적인 select 스타일링 예시
<div class="select-container">
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="cherry">체리</option>
<option value="grape">포도</option>
</select>
</div> /* select 기본 스타일 */
select {
width: 200px;
padding: 10px;
font-size: 16px;
border: 2px solid #4CAF50;
border-radius: 5px;
background-color: white;
color: #333;
appearance: none; /* 브라우저 기본 스타일 제거 */
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg'); /* 드롭다운 화살표 커스텀 */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 15px;
}
/* select 요소의 컨테이너에 화살표 추가 */
.select-container {
position: relative;
display: inline-block;
width: 200px;
}
/* 화살표를 select 박스 옆에 배치 */
.select-container::after {
content: '\25BC'; /* 아래 화살표 기호 */
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
pointer-events: none;
font-size: 14px;
color: #4CAF50;
}
/* select 박스가 포커스될 때 스타일 */
select:focus {
border-color: #ff5e5e;
outline: none;
box-shadow: 0 0 5px rgba(255, 94, 94, 0.5);
}
/* 옵션 스타일 */
option {
padding: 10px;
}설명
- 기본 스타일링:
- width, padding, font-size 등 기본적인 스타일 속성을 사용하여 select 박스의 너비와 내부 간격을 설정합니다.
- border, border-radius 속성을 사용해 경계선과 둥근 모서리를 설정합니다.
- appearance: none;을 사용해 브라우저의 기본 화살표 스타일을 제거했습니다.
- 커스텀 화살표 추가:
- background-image 속성을 사용하여 드롭다운 화살표 이미지를 커스텀할 수 있습니다. 위 예시에서는 간단한 SVG 이미지를 사용하여 화살표를 표시했습니다.
- background-position: right 10px center;는 화살표를 select 박스 안의 오른쪽 끝에 배치합니다.
- 컨테이너를 통한 추가 스타일링:
- .select-container를 사용하여 select 요소를 감싸고, ::after 가상 요소를 통해 화살표 기호(Unicode: \25BC)를 추가했습니다.
- 화살표는 position: absolute;로 배치하여 select 박스의 오른쪽에 표시됩니다.
- 포커스 시 스타일링:
- 사용자가 select 박스를 클릭하면 border-color가 변경되고, box-shadow가 추가되어 포커스 상태임을 강조합니다.
- 옵션 스타일링:
- option 태그는 기본적으로 스타일을 적용하기 어렵지만, 최소한 padding을 추가하여 옵션 간의 간격을 늘릴 수 있습니다.
요약
- CSS로 기본적인 select 박스의 스타일을 커스터마이징할 수 있지만, 브라우저마다 기본 스타일이 다를 수 있습니다.
- appearance: none; 속성을 사용하면 기본 브라우저 스타일을 없앨 수 있으며, 그 후 커스텀 이미지를 배경에 추가하거나 가상 요소를 사용하여 커스텀 화살표를 추가할 수 있습니다.
728x90