├── README.md ├── img └── arrow-down.svg ├── main.js ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Custom-Select-Box 2 | 3 | Here is a demo: https://godsont.github.io/Custom-Select-Box/ 4 | -------------------------------------------------------------------------------- /img/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const selected = document.querySelector(".selected"); 2 | const optionsContainer = document.querySelector(".options-container"); 3 | 4 | const optionsList = document.querySelectorAll(".option"); 5 | 6 | selected.addEventListener("click", () => { 7 | optionsContainer.classList.toggle("active"); 8 | }); 9 | 10 | optionsList.forEach(o => { 11 | o.addEventListener("click", () => { 12 | selected.innerHTML = o.querySelector("label").innerHTML; 13 | optionsContainer.classList.remove("active"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: "Roboto", sans-serif; 8 | background: #f7f6ff; 9 | } 10 | 11 | h2 { 12 | margin: 16px; 13 | } 14 | 15 | .container { 16 | margin-top: 100px; 17 | padding: 32px; 18 | } 19 | 20 | .select-box { 21 | display: flex; 22 | width: 400px; 23 | flex-direction: column; 24 | } 25 | 26 | .select-box .options-container { 27 | background: #2f3640; 28 | color: #f5f6fa; 29 | max-height: 0; 30 | width: 100%; 31 | opacity: 0; 32 | transition: all 0.4s; 33 | border-radius: 8px; 34 | overflow: hidden; 35 | 36 | order: 1; 37 | } 38 | 39 | .selected { 40 | background: #2f3640; 41 | border-radius: 8px; 42 | margin-bottom: 8px; 43 | color: #f5f6fa; 44 | position: relative; 45 | 46 | order: 0; 47 | } 48 | 49 | .selected::after { 50 | content: ""; 51 | background: url("img/arrow-down.svg"); 52 | background-size: contain; 53 | background-repeat: no-repeat; 54 | 55 | position: absolute; 56 | height: 100%; 57 | width: 32px; 58 | right: 10px; 59 | top: 5px; 60 | 61 | transition: all 0.4s; 62 | } 63 | 64 | .select-box .options-container.active { 65 | max-height: 240px; 66 | opacity: 1; 67 | overflow-y: scroll; 68 | } 69 | 70 | .select-box .options-container.active + .selected::after { 71 | transform: rotateX(180deg); 72 | top: -6px; 73 | } 74 | 75 | .select-box .options-container::-webkit-scrollbar { 76 | width: 8px; 77 | background: #0d141f; 78 | border-radius: 0 8px 8px 0; 79 | } 80 | 81 | .select-box .options-container::-webkit-scrollbar-thumb { 82 | background: #525861; 83 | border-radius: 0 8px 8px 0; 84 | } 85 | 86 | .select-box .option, 87 | .selected { 88 | padding: 12px 24px; 89 | cursor: pointer; 90 | } 91 | 92 | .select-box .option:hover { 93 | background: #414b57; 94 | } 95 | 96 | .select-box label { 97 | cursor: pointer; 98 | } 99 | 100 | .select-box .option .radio { 101 | display: none; 102 | } 103 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | GTCoding 8 | 9 | 10 | 11 |
12 |

Video Category

13 | 14 |
15 |
16 |
17 | 23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 |
65 |
66 | 67 |
68 | Select Video Category 69 |
70 |
71 |
72 | 73 | 74 | 75 | 76 | --------------------------------------------------------------------------------