728x90
300x250
셀렉트 박스의 기본값으로 문구가 나타나지만 사용자가 선택을 하면 안내 문구가 셀렉트 박스 내에서 보이지 않도록 하는 코드
<!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
반응형
'Front-end > HTML' 카테고리의 다른 글
| textarea placeholder 안나오는 이유 (0) | 2024.01.20 |
|---|---|
| aria-hidden 사용법과 사용이유 (0) | 2023.11.16 |
| [bootstrap]tooltip(툴팁) 줄바꿈 br 효과 data-tooltip (0) | 2022.09.07 |
| 컨텐츠 요소를 안보이게 하는 방법 비 (0) | 2022.06.22 |
| [html] float으로 레이아웃 잡기1 (0) | 2022.06.06 |
댓글