#e8e8e8
1.ui-wrapper { 2 --width: 250px; 3 --height: 50px; 4 --background: #fff; 5 --text-color: rgb(73, 73, 73); 6 --border-color: rgb(185, 184, 184); 7 --border-focus-color: rgb(0, 110, 255); 8 --shadow-color: rgba(34, 60, 80, 0.2); 9 --shadow-focus-color: rgba(0, 110, 255, 0.2); 10 --dropdown-button-color: #e6e6e6; 11 --dropdown-button-hover-color: #dad9d9; 12} 13 14.ui-wrapper *, 15.ui-wrapper *::before, 16.ui-wrapper *::after { 17 -webkit-box-sizing: border-box; 18 box-sizing: border-box; 19 font-family: sans-serif; 20 color: var(--text-color); 21} 22 23.ui-wrapper { 24 width: var(--width); 25 height: var(--height); 26 display: -webkit-inline-box; 27 display: -ms-inline-flexbox; 28 display: inline-flex; 29 border-radius: 10px; 30 position: relative; 31 border: 1px solid var(--border-color); 32 background-color: var(--background); 33 -webkit-box-pack: justify; 34 -ms-flex-pack: justify; 35 justify-content: space-between; 36 padding-right: 10px; 37 -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-color); 38 box-shadow: 0px 2px 5px 0px var(--shadow-color); 39 -webkit-transition: .4s; 40 -o-transition: .4s; 41 transition: .4s; 42 -webkit-user-select: none; 43 -moz-user-select: none; 44 -ms-user-select: none; 45 user-select: none; 46} 47 48.ui-wrapper>input { 49 -webkit-appearance: none; 50 -moz-appearance: none; 51 appearance: none; 52 margin: 0; 53 width: 0; 54 height: 0; 55 opacity: 0; 56 position: absolute; 57 left: 9999px; 58} 59 60.dropdown-container { 61 display: -webkit-box; 62 display: -ms-flexbox; 63 display: flex; 64 -webkit-box-pack: center; 65 -ms-flex-pack: center; 66 justify-content: center; 67 -webkit-box-align: center; 68 -ms-flex-align: center; 69 align-items: center; 70 padding: 0 10px; 71 cursor: pointer; 72 border-radius: 9px 0 0 9px; 73 background-color: var(--dropdown-button-color); 74} 75 76.dropdown-container::before { 77 content: "๐ฆ๐น"; 78 font-size: 20px; 79 background: none !important; 80} 81 82.dropdown-container::after { 83 content: ""; 84 background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDk0OTQ5IiB3aWR0aD0iNzAwcHQiIGhlaWdodD0iNzAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDcwMCA3MDAiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoCiAgICAgICAgZD0ibTM4MC4zOSA0ODQuNzkgMzA3LjA0LTMwNS45OWMxNi43NjYtMTcuODEyIDE2Ljc2Ni00NS4wNTkgMC02MS44MjgtMTYuNzY2LTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwbC0yNzUuNiAyNzUuNi0yNzUuNi0yNzUuNmMtMTcuODEyLTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwLTE2Ljc2NiAxNi43NjYtMTYuNzY2IDQ0LjAxMiAwIDYxLjgyOGwzMDUuOTkgMzA1Ljk5YzE3LjgxMiAxNi43NjYgNDUuMDU5IDE2Ljc2NiA2MS44MjggMHoiCiAgICAgICAgZmlsbC1ydWxlPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="); 85 width: 12px; 86 height: 12px; 87 background-position: center; 88 background-size: cover; 89 margin-left: 5px; 90 -webkit-transition: .2s; 91 -o-transition: .2s; 92 transition: .2s; 93} 94 95.select-wrapper { 96 width: var(--width); 97 position: absolute; 98 top: calc(var(--height) + 20px); 99 left: 0; 100 opacity: 0; 101 visibility: hidden; 102 -webkit-transition: .2s; 103 -o-transition: .2s; 104 transition: .2s; 105} 106 107.select-wrapper ul { 108 width: 100%; 109 background-color: white; 110 border-radius: 10px; 111 padding: 10px; 112 margin: 0; 113 list-style: none; 114 height: 300px; 115 display: -webkit-inline-box; 116 display: -ms-inline-flexbox; 117 display: inline-flex; 118 -webkit-box-orient: vertical; 119 -webkit-box-direction: normal; 120 -ms-flex-direction: column; 121 flex-direction: column; 122 -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 123 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 124 overflow-y: auto; 125 white-space: nowrap; 126} 127 128.select-wrapper ul li { 129 display: -webkit-box; 130 display: -ms-flexbox; 131 display: flex; 132 -webkit-box-align: center; 133 -ms-flex-align: center; 134 align-items: center; 135 padding: 5px; 136 border-radius: 5px; 137} 138 139.select-wrapper ul li label { 140 width: 100%; 141} 142 143.select-wrapper ul li, 144.select-wrapper ul li * { 145 cursor: pointer; 146} 147 148.select-wrapper ul li:hover { 149 background: lightgray; 150} 151 152.select-wrapper ul li span { 153 display: inline-block; 154 margin-right: 15px; 155} 156 157.input-wrapper { 158 width: 100%; 159 padding-left: 10px; 160 display: -webkit-box; 161 display: -ms-flexbox; 162 display: flex; 163 -webkit-box-orient: vertical; 164 -webkit-box-direction: normal; 165 -ms-flex-direction: column; 166 flex-direction: column; 167 -webkit-box-pack: center; 168 -ms-flex-pack: center; 169 justify-content: center; 170 row-gap: 2px; 171} 172 173.input-wrapper legend { 174 font-size: 11px; 175} 176 177.input-wrapper .textfield { 178 width: 100%; 179 display: -webkit-box; 180 display: -ms-flexbox; 181 display: flex; 182 -webkit-box-align: center; 183 -ms-flex-align: center; 184 align-items: center; 185} 186 187.input-wrapper .textfield::before { 188 content: "+31"; 189 margin-right: 5px; 190 white-space: nowrap; 191} 192 193.input-wrapper .textfield input { 194 width: 100%; 195 font-size: 16px; 196 outline: none; 197 border: none; 198 background: none; 199} 200 201.invalid-msg { 202 font-size: 12px; 203 position: absolute; 204 color: red; 205 top: 115%; 206 left: 0; 207 opacity: 0; 208 visibility: hidden; 209 -webkit-transition: .2s; 210 -o-transition: .2s; 211 transition: .2s; 212} 213 214/* actions */ 215 216#phonenumber:invalid+.invalid-msg { 217 top: 110%; 218 opacity: 1; 219 visibility: visible; 220} 221 222.ui-wrapper:focus-within { 223 border-color: var(--border-focus-color); 224 -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-focus-color); 225 box-shadow: 0px 2px 5px 0px var(--shadow-focus-color); 226} 227 228.dropdown-container:hover { 229 background-color: var(--dropdown-button-hover-color); 230} 231 232.dropdown-checkbox:checked~.select-wrapper { 233 top: calc(var(--height) + 5px); 234 opacity: 1; 235 visibility: visible; 236} 237 238.dropdown-checkbox:checked+.dropdown-container::after { 239 rotate: 180deg; 240 translate: 0 -2px; 241} 242 243.ui-wrapper input#Austria:checked~.dropdown-container::before, 244.ui-wrapper input#Austria:checked~.select-wrapper li.Austria { 245 content: "๐ฆ๐น"; 246 background-color: lightgray; 247} 248 249.ui-wrapper input#Belgium:checked~.dropdown-container::before, 250.ui-wrapper input#Belgium:checked~.select-wrapper li.Belgium { 251 content: "๐ง๐ช"; 252 background-color: lightgray; 253} 254 255.ui-wrapper input#Bulgaria:checked~.dropdown-container::before, 256.ui-wrapper input#Bulgaria:checked~.select-wrapper li.Bulgaria { 257 content: "๐ง๐ฌ"; 258 background-color: lightgray; 259} 260 261.ui-wrapper input#Croatia:checked~.dropdown-container::before, 262.ui-wrapper input#Croatia:checked~.select-wrapper li.Croatia { 263 content: "๐ญ๐ท"; 264 background-color: lightgray; 265} 266 267.ui-wrapper input#Cyprus:checked~.dropdown-container::before, 268.ui-wrapper input#Cyprus:checked~.select-wrapper li.Cyprus { 269 content: "๐จ๐พ"; 270 background-color: lightgray; 271} 272 273.ui-wrapper input#Czech:checked~.dropdown-container::before, 274.ui-wrapper input#Czech:checked~.select-wrapper li.Czech { 275 content: "๐จ๐ฟ"; 276 background-color: lightgray; 277} 278 279.ui-wrapper input#Denmark:checked~.dropdown-container::before, 280.ui-wrapper input#Denmark:checked~.select-wrapper li.Denmark { 281 content: "๐ฉ๐ฐ"; 282 background-color: lightgray; 283} 284 285.ui-wrapper input#Estonia:checked~.dropdown-container::before, 286.ui-wrapper input#Estonia:checked~.select-wrapper li.Estonia { 287 content: "๐ช๐ช"; 288 background-color: lightgray; 289} 290 291.ui-wrapper input#Finland:checked~.dropdown-container::before, 292.ui-wrapper input#Finland:checked~.select-wrapper li.Finland { 293 content: "๐ซ๐ฎ"; 294 background-color: lightgray; 295} 296 297.ui-wrapper input#France:checked~.dropdown-container::before, 298.ui-wrapper input#France:checked~.select-wrapper li.France { 299 content: "๐ซ๐ท"; 300 background-color: lightgray; 301} 302 303.ui-wrapper input#Germany:checked~.dropdown-container::before, 304.ui-wrapper input#Germany:checked~.select-wrapper li.Germany { 305 content: "๐ฉ๐ช"; 306 background-color: lightgray; 307} 308 309.ui-wrapper input#Greece:checked~.dropdown-container::before, 310.ui-wrapper input#Greece:checked~.select-wrapper li.Greece { 311 content: "๐ฌ๐ท"; 312 background-color: lightgray; 313} 314 315.ui-wrapper input#Hungary:checked~.dropdown-container::before, 316.ui-wrapper input#Hungary:checked~.select-wrapper li.Hungary { 317 content: "๐ญ๐บ"; 318 background-color: lightgray; 319} 320 321.ui-wrapper input#Iceland:checked~.dropdown-container::before, 322.ui-wrapper input#Iceland:checked~.select-wrapper li.Iceland { 323 content: "๐ฎ๐ธ"; 324 background-color: lightgray; 325} 326 327.ui-wrapper input#Ireland:checked~.dropdown-container::before, 328.ui-wrapper input#Ireland:checked~.select-wrapper li.Ireland { 329 content: "๐ฎ๐ช"; 330 background-color: lightgray; 331} 332 333.ui-wrapper input#Italy:checked~.dropdown-container::before, 334.ui-wrapper input#Italy:checked~.select-wrapper li.Italy { 335 content: "๐ฎ๐น"; 336 background-color: lightgray; 337} 338 339.ui-wrapper input#Latvia:checked~.dropdown-container::before, 340.ui-wrapper input#Latvia:checked~.select-wrapper li.Latvia { 341 content: "๐ฑ๐ป"; 342 background-color: lightgray; 343} 344 345.ui-wrapper input#Liechtenstein:checked~.dropdown-container::before, 346.ui-wrapper input#Liechtenstein:checked~.select-wrapper li.Liechtenstein { 347 content: "๐ฑ๐ฎ"; 348 background-color: lightgray; 349} 350 351.ui-wrapper input#Lithuania:checked~.dropdown-container::before, 352.ui-wrapper input#Lithuania:checked~.select-wrapper li.Lithuania { 353 content: "๐ฑ๐น"; 354 background-color: lightgray; 355} 356 357.ui-wrapper input#Luxembourg:checked~.dropdown-container::before, 358.ui-wrapper input#Luxembourg:checked~.select-wrapper li.Luxembourg { 359 content: "๐ฑ๐บ"; 360 background-color: lightgray; 361} 362 363.ui-wrapper input#Malta:checked~.dropdown-container::before, 364.ui-wrapper input#Malta:checked~.select-wrapper li.Malta { 365 content: "๐ฒ๐น"; 366 background-color: lightgray; 367} 368 369.ui-wrapper input#Netherlands:checked~.dropdown-container::before, 370.ui-wrapper input#Netherlands:checked~.select-wrapper li.Netherlands { 371 content: "๐ณ๐ฑ"; 372 background-color: lightgray; 373} 374 375.ui-wrapper input#Norway:checked~.dropdown-container::before, 376.ui-wrapper input#Norway:checked~.select-wrapper li.Norway { 377 content: "๐ณ๐ด"; 378 background-color: lightgray; 379} 380 381.ui-wrapper input#Poland:checked~.dropdown-container::before, 382.ui-wrapper input#Poland:checked~.select-wrapper li.Poland { 383 content: "๐ต๐ฑ"; 384 background-color: lightgray; 385} 386 387.ui-wrapper input#Portugal:checked~.dropdown-container::before, 388.ui-wrapper input#Portugal:checked~.select-wrapper li.Portugal { 389 content: "๐ต๐น"; 390 background-color: lightgray; 391} 392 393.ui-wrapper input#Romania:checked~.dropdown-container::before, 394.ui-wrapper input#Romania:checked~.select-wrapper li.Romania { 395 content: "๐ท๐ด"; 396 background-color: lightgray; 397} 398 399.ui-wrapper input#Slovakia:checked~.dropdown-container::before, 400.ui-wrapper input#Slovakia:checked~.select-wrapper li.Slovakia { 401 content: "๐ธ๐ฐ"; 402 background-color: lightgray; 403} 404 405.ui-wrapper input#Slovenia:checked~.dropdown-container::before, 406.ui-wrapper input#Slovenia:checked~.select-wrapper li.Slovenia { 407 content: "๐ธ๐ฎ"; 408 background-color: lightgray; 409} 410 411.ui-wrapper input#Spain:checked~.dropdown-container::before, 412.ui-wrapper input#Spain:checked~.select-wrapper li.Spain { 413 content: "๐ช๐ธ"; 414 background-color: lightgray; 415} 416 417.ui-wrapper input#Sweden:checked~.dropdown-container::before, 418.ui-wrapper input#Sweden:checked~.select-wrapper li.Sweden { 419 content: "๐ธ๐ช"; 420 background-color: lightgray; 421} 422 423.ui-wrapper input#Austria:checked~.input-wrapper .textfield::before { 424 content: "+43"; 425} 426 427.ui-wrapper input#Belgium:checked~.input-wrapper .textfield::before { 428 content: "+32"; 429} 430 431.ui-wrapper input#Bulgaria:checked~.input-wrapper .textfield::before { 432 content: "+359"; 433} 434 435.ui-wrapper input#Croatia:checked~.input-wrapper .textfield::before { 436 content: "+385"; 437} 438 439.ui-wrapper input#Cyprus:checked~.input-wrapper .textfield::before { 440 content: "+357"; 441} 442 443.ui-wrapper input#Czech:checked~.input-wrapper .textfield::before { 444 content: "+420"; 445} 446 447.ui-wrapper input#Denmark:checked~.input-wrapper .textfield::before { 448 content: "+45"; 449} 450 451.ui-wrapper input#Estonia:checked~.input-wrapper .textfield::before { 452 content: "+372"; 453} 454 455.ui-wrapper input#Finland:checked~.input-wrapper .textfield::before { 456 content: "+358"; 457} 458 459.ui-wrapper input#France:checked~.input-wrapper .textfield::before { 460 content: "+33"; 461} 462 463.ui-wrapper input#Germany:checked~.input-wrapper .textfield::before { 464 content: "+49"; 465} 466 467.ui-wrapper input#Greece:checked~.input-wrapper .textfield::before { 468 content: "+30"; 469} 470 471.ui-wrapper input#Hungary:checked~.input-wrapper .textfield::before { 472 content: "+36"; 473} 474 475.ui-wrapper input#Iceland:checked~.input-wrapper .textfield::before { 476 content: "+354"; 477} 478 479.ui-wrapper input#Ireland:checked~.input-wrapper .textfield::before { 480 content: "+353"; 481} 482 483.ui-wrapper input#Italy:checked~.input-wrapper .textfield::before { 484 content: "+39"; 485} 486 487.ui-wrapper input#Latvia:checked~.input-wrapper .textfield::before { 488 content: "+371"; 489} 490 491.ui-wrapper input#Liechtenstein:checked~.input-wrapper .textfield::before { 492 content: "+423"; 493} 494 495.ui-wrapper input#Lithuania:checked~.input-wrapper .textfield::before { 496 content: "+370"; 497} 498 499.ui-wrapper input#Luxembourg:checked~.input-wrapper .textfield::before { 500 content: "+352"; 501} 502 503.ui-wrapper input#Malta:checked~.input-wrapper .textfield::before { 504 content: "+356"; 505} 506 507.ui-wrapper input#Netherlands:checked~.input-wrapper .textfield::before { 508 content: "+31"; 509} 510 511.ui-wrapper input#Norway:checked~.input-wrapper .textfield::before { 512 content: "+47"; 513} 514 515.ui-wrapper input#Poland:checked~.input-wrapper .textfield::before { 516 content: "+48"; 517} 518 519.ui-wrapper input#Portugal:checked~.input-wrapper .textfield::before { 520 content: "+351"; 521} 522 523.ui-wrapper input#Romania:checked~.input-wrapper .textfield::before { 524 content: "+40"; 525} 526 527.ui-wrapper input#Slovakia:checked~.input-wrapper .textfield::before { 528 content: "+421"; 529} 530 531.ui-wrapper input#Slovenia:checked~.input-wrapper .textfield::before { 532 content: "+386"; 533} 534 535.ui-wrapper input#Spain:checked~.input-wrapper .textfield::before { 536 content: "+34"; 537} 538 539.ui-wrapper input#Sweden:checked~.input-wrapper .textfield::before { 540 content: "+46"; 541}
ย
2.7K views
2.7K views
Comments
MIT License