I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS select box 오전/오후 시간 선택 placeholder 만들기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 3. 16:09

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<style>
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #ddd;
        padding: 5px 10px;
    }
 
    select:invalid {
        color: #bbbbbb;
    }
 
    select optgroup, select option {
        color: #414144;
    }
</style>
 
<select required>
    <option value="" selected disabled hidden>(시간 선택)</option>
    <optgroup label="오전">
        <option value="0900">09:00</option>
        <option value="0930">09:30</option>
        <option value="1000">10:00</option>
        <option value="1030">10:30</option>
    </optgroup>
 
    <optgroup label="오후">
        <option value="1300">1:00</option>
        <option value="1330">1:30</option>
        <option value="1400">2:00</option>
        <option value="1430">2:30</option>
    </optgroup>
</select>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 제이쿼리 window resize 이벤트 한 번만 실행시키기  (0) 2021.07.05
(즐거웅코드) 자바스크립트 window resize 이벤트 한 번만 실행시키기  (0) 2021.07.04
(즐거웅코드) CSS select box placeholder 만들기  (0) 2021.07.03
(즐거웅코드) CSS radio를 button처럼 사용하기  (0) 2021.07.01
(즐거웅코드) 제이쿼리 특정 객체 Y축 위치 가져오기  (0) 2021.06.30

관련글

댓글 0

티스토리툴바