728x90
안녕하세요 이번시간에는 웹페이지를 만들 때 자주 사용하는 select 태그에 placeholder를 적용하는 방법에 대해 알아보겠습니다.
일반적인 input태그나 textarea 같은 경우에는 태그 안에 placeholder = "텍스트"와 같은 형태로 간단하게 구현히 가능하지만, selector에서는 이와 같은 기능을 따로 제공하지 않습니다.
예제 코드 및 실행 화면입니다.
코드의 전체적인 원리는 placeholder용 option을 하나 생성한 뒤 비활성화 처리하고, css에서 invalid 속성을 활용해 해당 option만 색깔을 옅은색으로 처리하는 방식입니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "./index.css"/>
<script defer = "defer" src = "./index.js"></script>
</head>
<style>
select:invalid { color: gray; }
option {color: black;}
</style>
<body>
<select
required>
<option
value=""
disabled="disabled"
selected="selected"
hidden="hidden">과일 종류</option>
<option class="" value="사과">사과</option>
<option class="" value="귤">귤</option>
<option class="" value="복숭아">복숭아</option>
<option class="" value="메론">메론</option>
<option class="" value="수박">수박</option>
</select>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [javascript] css 제어로 확장형 사이드 메뉴 만들기 (0) | 2023.03.23 |
|---|---|
| [JavaScript] fetch 요청 취소 (0) | 2023.03.19 |
| [JavaScript] 체크박스 커스텀하기 (0) | 2023.03.04 |
| [JavaScript]XmlHttpRequest 사용해서 http 통신하기. (0) | 2023.03.03 |
| [javascript] Webrtc 1:1 영상통화 구현하기 (0) | 2023.02.23 |
