{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n Phonenumber*\n \n \n

\n \n This is not a valid phone number\n

🇦🇹Austria (+43)
🇧🇪Belgium (+32)
🇧🇬Bulgaria (+359)
🇭🇷Croatia (+385)
🇨🇾Cyprus (+357)
🇨🇿Czech Republic (+420)
🇩🇰Denmark (+45)
🇪🇪Estonia (+372)
🇫🇮Finland (+358)
🇫🇷France (+33)
🇩🇪Germany (+49)
🇬🇷Greece (+30)
🇭🇺Hungary (+36)
🇮🇸Iceland (+354)
🇮🇪Republic of Ireland (+353)
🇮🇹Italy (+39)
🇱🇻Latvia (+371)
🇱🇮Liechtenstein (+423)
🇱🇹Lithuania (+370)
🇱🇺Luxembourg (+352)
🇲🇹Malta (+356)
🇳🇱Netherlands (+31)
🇳🇴Norway (+47)
🇵🇱Poland (+48)
🇵🇹Portugal (+351)
🇷🇴Romania (+40)
🇸🇰Slovakia (+421)
🇸🇮Slovenia (+386)
🇪🇸Spain (+34)
🇸🇪Sweden (+46)

","css":".ui-wrapper {\n --width: 250px;\n --height: 50px;\n --background: #fff;\n --text-color: rgb(73, 73, 73);\n --border-color: rgb(185, 184, 184);\n --border-focus-color: rgb(0, 110, 255);\n --shadow-color: rgba(34, 60, 80, 0.2);\n --shadow-focus-color: rgba(0, 110, 255, 0.2);\n --dropdown-button-color: #e6e6e6;\n --dropdown-button-hover-color: #dad9d9;\n}\n\n.ui-wrapper *,\n.ui-wrapper *::before,\n.ui-wrapper *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-family: sans-serif;\n color: var(--text-color);\n}\n\n.ui-wrapper {\n width: var(--width);\n height: var(--height);\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n border-radius: 10px;\n position: relative;\n border: 1px solid var(--border-color);\n background-color: var(--background);\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-right: 10px;\n -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-color);\n box-shadow: 0px 2px 5px 0px var(--shadow-color);\n -webkit-transition: .4s;\n -o-transition: .4s;\n transition: .4s;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.ui-wrapper>input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n margin: 0;\n width: 0;\n height: 0;\n opacity: 0;\n position: absolute;\n left: 9999px;\n}\n\n.dropdown-container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-radius: 9px 0 0 9px;\n background-color: var(--dropdown-button-color);\n}\n\n.dropdown-container::before {\n content: \"🇦🇹\";\n font-size: 20px;\n background: none !important;\n}\n\n.dropdown-container::after {\n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDk0OTQ5IiB3aWR0aD0iNzAwcHQiIGhlaWdodD0iNzAwcHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDcwMCA3MDAiCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoCiAgICAgICAgZD0ibTM4MC4zOSA0ODQuNzkgMzA3LjA0LTMwNS45OWMxNi43NjYtMTcuODEyIDE2Ljc2Ni00NS4wNTkgMC02MS44MjgtMTYuNzY2LTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwbC0yNzUuNiAyNzUuNi0yNzUuNi0yNzUuNmMtMTcuODEyLTE2Ljc2Ni00NS4wNTktMTYuNzY2LTYxLjgyOCAwLTE2Ljc2NiAxNi43NjYtMTYuNzY2IDQ0LjAxMiAwIDYxLjgyOGwzMDUuOTkgMzA1Ljk5YzE3LjgxMiAxNi43NjYgNDUuMDU5IDE2Ljc2NiA2MS44MjggMHoiCiAgICAgICAgZmlsbC1ydWxlPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==\");\n width: 12px;\n height: 12px;\n background-position: center;\n background-size: cover;\n margin-left: 5px;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n.select-wrapper {\n width: var(--width);\n position: absolute;\n top: calc(var(--height) + 20px);\n left: 0;\n opacity: 0;\n visibility: hidden;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n.select-wrapper ul {\n width: 100%;\n background-color: white;\n border-radius: 10px;\n padding: 10px;\n margin: 0;\n list-style: none;\n height: 300px;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n overflow-y: auto;\n white-space: nowrap;\n}\n\n.select-wrapper ul li {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 5px;\n border-radius: 5px;\n}\n\n.select-wrapper ul li label {\n width: 100%;\n}\n\n.select-wrapper ul li,\n.select-wrapper ul li * {\n cursor: pointer;\n}\n\n.select-wrapper ul li:hover {\n background: lightgray;\n}\n\n.select-wrapper ul li span {\n display: inline-block;\n margin-right: 15px;\n}\n\n.input-wrapper {\n width: 100%;\n padding-left: 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n row-gap: 2px;\n}\n\n.input-wrapper legend {\n font-size: 11px;\n}\n\n.input-wrapper .textfield {\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.input-wrapper .textfield::before {\n content: \"+31\";\n margin-right: 5px;\n white-space: nowrap;\n}\n\n.input-wrapper .textfield input {\n width: 100%;\n font-size: 16px;\n outline: none;\n border: none;\n background: none;\n}\n\n.invalid-msg {\n font-size: 12px;\n position: absolute;\n color: red;\n top: 115%;\n left: 0;\n opacity: 0;\n visibility: hidden;\n -webkit-transition: .2s;\n -o-transition: .2s;\n transition: .2s;\n}\n\n/* actions */\n\n#phonenumber:invalid+.invalid-msg {\n top: 110%;\n opacity: 1;\n visibility: visible;\n}\n\n.ui-wrapper:focus-within {\n border-color: var(--border-focus-color);\n -webkit-box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);\n box-shadow: 0px 2px 5px 0px var(--shadow-focus-color);\n}\n\n.dropdown-container:hover {\n background-color: var(--dropdown-button-hover-color);\n}\n\n.dropdown-checkbox:checked~.select-wrapper {\n top: calc(var(--height) + 5px);\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-checkbox:checked+.dropdown-container::after {\n rotate: 180deg;\n translate: 0 -2px;\n}\n\n.ui-wrapper input#Austria:checked~.dropdown-container::before,\n.ui-wrapper input#Austria:checked~.select-wrapper li.Austria {\n content: \"🇦🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Belgium:checked~.dropdown-container::before,\n.ui-wrapper input#Belgium:checked~.select-wrapper li.Belgium {\n content: \"🇧🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Bulgaria:checked~.dropdown-container::before,\n.ui-wrapper input#Bulgaria:checked~.select-wrapper li.Bulgaria {\n content: \"🇧🇬\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Croatia:checked~.dropdown-container::before,\n.ui-wrapper input#Croatia:checked~.select-wrapper li.Croatia {\n content: \"🇭🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Cyprus:checked~.dropdown-container::before,\n.ui-wrapper input#Cyprus:checked~.select-wrapper li.Cyprus {\n content: \"🇨🇾\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Czech:checked~.dropdown-container::before,\n.ui-wrapper input#Czech:checked~.select-wrapper li.Czech {\n content: \"🇨🇿\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Denmark:checked~.dropdown-container::before,\n.ui-wrapper input#Denmark:checked~.select-wrapper li.Denmark {\n content: \"🇩🇰\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Estonia:checked~.dropdown-container::before,\n.ui-wrapper input#Estonia:checked~.select-wrapper li.Estonia {\n content: \"🇪🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Finland:checked~.dropdown-container::before,\n.ui-wrapper input#Finland:checked~.select-wrapper li.Finland {\n content: \"🇫🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#France:checked~.dropdown-container::before,\n.ui-wrapper input#France:checked~.select-wrapper li.France {\n content: \"🇫🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Germany:checked~.dropdown-container::before,\n.ui-wrapper input#Germany:checked~.select-wrapper li.Germany {\n content: \"🇩🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Greece:checked~.dropdown-container::before,\n.ui-wrapper input#Greece:checked~.select-wrapper li.Greece {\n content: \"🇬🇷\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Hungary:checked~.dropdown-container::before,\n.ui-wrapper input#Hungary:checked~.select-wrapper li.Hungary {\n content: \"🇭🇺\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Iceland:checked~.dropdown-container::before,\n.ui-wrapper input#Iceland:checked~.select-wrapper li.Iceland {\n content: \"🇮🇸\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Ireland:checked~.dropdown-container::before,\n.ui-wrapper input#Ireland:checked~.select-wrapper li.Ireland {\n content: \"🇮🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Italy:checked~.dropdown-container::before,\n.ui-wrapper input#Italy:checked~.select-wrapper li.Italy {\n content: \"🇮🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Latvia:checked~.dropdown-container::before,\n.ui-wrapper input#Latvia:checked~.select-wrapper li.Latvia {\n content: \"🇱🇻\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Liechtenstein:checked~.dropdown-container::before,\n.ui-wrapper input#Liechtenstein:checked~.select-wrapper li.Liechtenstein {\n content: \"🇱🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Lithuania:checked~.dropdown-container::before,\n.ui-wrapper input#Lithuania:checked~.select-wrapper li.Lithuania {\n content: \"🇱🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Luxembourg:checked~.dropdown-container::before,\n.ui-wrapper input#Luxembourg:checked~.select-wrapper li.Luxembourg {\n content: \"🇱🇺\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Malta:checked~.dropdown-container::before,\n.ui-wrapper input#Malta:checked~.select-wrapper li.Malta {\n content: \"🇲🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Netherlands:checked~.dropdown-container::before,\n.ui-wrapper input#Netherlands:checked~.select-wrapper li.Netherlands {\n content: \"🇳🇱\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Norway:checked~.dropdown-container::before,\n.ui-wrapper input#Norway:checked~.select-wrapper li.Norway {\n content: \"🇳🇴\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Poland:checked~.dropdown-container::before,\n.ui-wrapper input#Poland:checked~.select-wrapper li.Poland {\n content: \"🇵🇱\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Portugal:checked~.dropdown-container::before,\n.ui-wrapper input#Portugal:checked~.select-wrapper li.Portugal {\n content: \"🇵🇹\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Romania:checked~.dropdown-container::before,\n.ui-wrapper input#Romania:checked~.select-wrapper li.Romania {\n content: \"🇷🇴\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Slovakia:checked~.dropdown-container::before,\n.ui-wrapper input#Slovakia:checked~.select-wrapper li.Slovakia {\n content: \"🇸🇰\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Slovenia:checked~.dropdown-container::before,\n.ui-wrapper input#Slovenia:checked~.select-wrapper li.Slovenia {\n content: \"🇸🇮\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Spain:checked~.dropdown-container::before,\n.ui-wrapper input#Spain:checked~.select-wrapper li.Spain {\n content: \"🇪🇸\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Sweden:checked~.dropdown-container::before,\n.ui-wrapper input#Sweden:checked~.select-wrapper li.Sweden {\n content: \"🇸🇪\";\n background-color: lightgray;\n}\n\n.ui-wrapper input#Austria:checked~.input-wrapper .textfield::before {\n content: \"+43\";\n}\n\n.ui-wrapper input#Belgium:checked~.input-wrapper .textfield::before {\n content: \"+32\";\n}\n\n.ui-wrapper input#Bulgaria:checked~.input-wrapper .textfield::before {\n content: \"+359\";\n}\n\n.ui-wrapper input#Croatia:checked~.input-wrapper .textfield::before {\n content: \"+385\";\n}\n\n.ui-wrapper input#Cyprus:checked~.input-wrapper .textfield::before {\n content: \"+357\";\n}\n\n.ui-wrapper input#Czech:checked~.input-wrapper .textfield::before {\n content: \"+420\";\n}\n\n.ui-wrapper input#Denmark:checked~.input-wrapper .textfield::before {\n content: \"+45\";\n}\n\n.ui-wrapper input#Estonia:checked~.input-wrapper .textfield::before {\n content: \"+372\";\n}\n\n.ui-wrapper input#Finland:checked~.input-wrapper .textfield::before {\n content: \"+358\";\n}\n\n.ui-wrapper input#France:checked~.input-wrapper .textfield::before {\n content: \"+33\";\n}\n\n.ui-wrapper input#Germany:checked~.input-wrapper .textfield::before {\n content: \"+49\";\n}\n\n.ui-wrapper input#Greece:checked~.input-wrapper .textfield::before {\n content: \"+30\";\n}\n\n.ui-wrapper input#Hungary:checked~.input-wrapper .textfield::before {\n content: \"+36\";\n}\n\n.ui-wrapper input#Iceland:checked~.input-wrapper .textfield::before {\n content: \"+354\";\n}\n\n.ui-wrapper input#Ireland:checked~.input-wrapper .textfield::before {\n content: \"+353\";\n}\n\n.ui-wrapper input#Italy:checked~.input-wrapper .textfield::before {\n content: \"+39\";\n}\n\n.ui-wrapper input#Latvia:checked~.input-wrapper .textfield::before {\n content: \"+371\";\n}\n\n.ui-wrapper input#Liechtenstein:checked~.input-wrapper .textfield::before {\n content: \"+423\";\n}\n\n.ui-wrapper input#Lithuania:checked~.input-wrapper .textfield::before {\n content: \"+370\";\n}\n\n.ui-wrapper input#Luxembourg:checked~.input-wrapper .textfield::before {\n content: \"+352\";\n}\n\n.ui-wrapper input#Malta:checked~.input-wrapper .textfield::before {\n content: \"+356\";\n}\n\n.ui-wrapper input#Netherlands:checked~.input-wrapper .textfield::before {\n content: \"+31\";\n}\n\n.ui-wrapper input#Norway:checked~.input-wrapper .textfield::before {\n content: \"+47\";\n}\n\n.ui-wrapper input#Poland:checked~.input-wrapper .textfield::before {\n content: \"+48\";\n}\n\n.ui-wrapper input#Portugal:checked~.input-wrapper .textfield::before {\n content: \"+351\";\n}\n\n.ui-wrapper input#Romania:checked~.input-wrapper .textfield::before {\n content: \"+40\";\n}\n\n.ui-wrapper input#Slovakia:checked~.input-wrapper .textfield::before {\n content: \"+421\";\n}\n\n.ui-wrapper input#Slovenia:checked~.input-wrapper .textfield::before {\n content: \"+386\";\n}\n\n.ui-wrapper input#Spain:checked~.input-wrapper .textfield::before {\n content: \"+34\";\n}\n\n.ui-wrapper input#Sweden:checked~.input-wrapper .textfield::before {\n content: \"+46\";\n}"}

nasty-robin-22

👁 实时预览

📝 源代码