728x90
반응형
[HTML & CSS] select option태그에 placeholder(플레이스 홀더) 기능 처럼 꾸미기 && 효과내기
굳이 이런저런 설명 없이 바로 코드로 보여드리겠습니다 !!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카페 메뉴</title>
<!-- 셀렉 박스 눌렀을시 메뉴 선택이 안보이게 -->
<style>
select option[value=""][disabled] {
display: none;
}
</style>
</head>
<body>
<select required>
<option value="" disabled selected>메뉴 선택</option>
<option value="Americano">아메리카노</option>
<option value="Cafelatte">카페라떼</option>
<option value="Green tea latte">그린티라떼</option>
<option value="Citron tea">유자차</option>
</select>
</body>
</html>
<select required>
<select> 태그의 required 속성은 폼 데이터(form data)가 서버로 제출되기 전 사용자가 반드시 드롭다운 리스트의 값을 선택해야 함을 명시합니다.
required 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
<option disabled selected>
<option> 태그의 disabled 속성은 해당 옵션이 비활성화됨을 명시합니다.
<option> 태그의 selected 속성은 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시합니다.
결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] <button> 버튼 onclick 이벤트로 링크 이동 및 넣는법 - 초간단 !! (0) | 2022.04.08 |
|---|---|
| [HTML & CSS] 입력한 상태 그대로 보여 주는법, <pre> 태그 사용법 !! (0) | 2022.02.09 |
| [HTML & CSS] visibility:hidden 과 display:none 차이점 및 사용법 (0) | 2021.09.02 |
| [Html & jQuery] input 태그안에 type 값 변경 초간단 방법 !! (0) | 2021.07.12 |
| [Html & jQuery] input 태그안에 value 값 넣는 초간단 방법 !! (0) | 2021.07.11 |
댓글