Front-end/HTML
select 기본값 문구 선택 시에 안 보이도록 하는 방법
mooyou
2023. 11. 20. 20:17
728x90
300x250
SMALL
셀렉트 박스의 기본값으로 문구가 나타나지만 사용자가 선택을 하면 안내 문구가 셀렉트 박스 내에서 보이지 않도록 하는 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
select option[value="placeholder"]:checked {
display: none;
}
</style>
<title>Select Placeholder Example</title>
</head>
<body>
<label for="exampleSelect">Select an option:</label>
<select id="exampleSelect">
<option value="placeholder" disabled selected hidden>선택해 주세요</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</body>
</html>
위에 "선택해 주세요" 옵션은 disabled, selected, hidden 속성을 사용하여 기본값으로 설정되어 있지 않다.
이 옵션이 선택된 경우 display:none 스타일이 적용된다.
728x90
반응형
LIST