Input by Galahhad

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}