HTML의 <select> 요소와 그 안의 옵션들을 CSS로 꾸미고 싶다면, 아래 예제 코드를 참고해 보세요. 셀렉트 박스의 너비, 여백, 테두리, 배경색 등을 자유롭게 조정할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 10px 15px;
border: 1px dashed blue;
border-radius: 4px;
background-color: orange;
}
</style>
</head>
<body>
<p>Learn,</p>
<form>
<select id = "country" name = "country">
<option value = "java">Java</option>
<option value = "ruby">Ruby</option>
<option value = "oracle">Oracle</option>
<option value = "tableau">Tableau</option>
</select>
</form>
</body>
</html>코드 설명
위 예제에서 사용된 주요 CSS 속성은 다음과 같습니다.
- width: 100% — 셀렉트 박스가 부모 요소의 전체 너비를 차지하도록 설정합니다.
- padding: 10px 15px — 내부 여백을 추가해 텍스트가 답답하지 않게 배치합니다.
- border: 1px dashed blue — 파란색 점선 테두리를 적용합니다. 실선(solid)이나 이중(double) 등 다른 스타일로 변경할 수도 있습니다.
- border-radius: 4px — 모서리를 살짝 둥글게 만들어 부드러운 느낌을 줍니다.
- background-color: orange — 셀렉트 박스의 배경색을 주황색으로 지정합니다.
참고 사항
브라우저마다 드롭다운 목록이 펼쳐졌을 때의 기본 스타일은 다르게 렌더링됩니다. 특히 <option> 항목 자체는 운영체제 및 브라우저에 따라 스타일링이 제한적일 수 있으므로, 완전히 커스텀한 UI가 필요하다면 JavaScript 라이브러리(예: Select2, Choices.js)를 활용하는 것도 좋은 방법입니다.