{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"49df95","snapshot":null,"tags":null,"title":"input by laminelawal","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n padding: 10px;\n width: 120px;\n border: none;\n outline: none;\n border-radius: 5px;\n box-shadow: 0 1px gray;\n font-size: 18px;\n transition: width 0.3s;\n font-family: Consolas,monaco,monospace;\n}\n\n.input:focus {\n outline: 1px solid blue;\n box-shadow: none;\n width: 230px;\n}\n\n.input::placeholder {\n color: blue;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1d9f5f","snapshot":null,"tags":null,"title":"input by elijahgummer","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n width: 200px;\n padding: 12px;\n border: 2px solid #3498db;\n border-radius: 8px;\n outline: none;\n font-size: 18px;\n transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;\n background-color: #fff;\n color: #333;\n box-sizing: border-box;\n}\n\n.input:focus {\n border-color: #2980b9;\n box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);\n transform: scale(1.02);\n}\n\n/* Placeholder Styling */\n.input::placeholder {\n color: #aaa;\n font-style: italic;\n}\n\n/* Hover Effect */\n.input:hover {\n background-color: #f0f8ff;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"dcd16a","snapshot":null,"tags":null,"title":"input by akshat-patel28","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":488,"cssLen":1614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

","css":".input-div {\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 2px solid rgb(1, 235, 252);\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n animation: flicker 2s linear infinite;\n}\n\n.icon {\n color: rgb(1, 235, 252);\n font-size: 2rem;\n cursor: pointer;\n animation: iconflicker 2s linear infinite;\n}\n\n.input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer !important;\n}\n\n@keyframes flicker {\n 0% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 5% {\n border: none;\n box-shadow: none;\n }\n\n 10% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 25% {\n border: none;\n box-shadow: none;\n }\n\n 30% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 100% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n}\n\n@keyframes iconflicker {\n 0% {\n opacity: 1;\n }\n\n 5% {\n opacity: 0.2;\n }\n\n 10% {\n opacity: 1;\n }\n\n 25% {\n opacity: 0.2;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"0ba344","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

","css":".InputContainer {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(8, 8, 8);\n overflow: hidden;\n padding: 0px 5px 0px 15px;\n border: 1px solid rgba(255, 255, 255, 0.322);\n border-radius: 10px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);\n}\n\n.input {\n width: 170px;\n height: 100%;\n border: none;\n outline: none;\n font-size: 0.9em;\n caret-color: rgb(255, 81, 0);\n background-color: rgb(8, 8, 8);\n font-weight: 600;\n color: white;\n}\n\n.visaCard {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 40px;\n height: 25px;\n background-color: rgb(8, 8, 8);\n pointer-events: none;\n border: 1px solid rgba(255, 255, 255, 0.068);\n border-radius: 7px;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1cd8d7","snapshot":null,"tags":null,"title":"input by SSpisso","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":75,"cssLen":511,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n background-color: #383838;\n border: 1ex solid none;\n border-top-width: 1.7em;\n margin: 0;\n padding: 0;\n color: #383838;\n word-wrap: break-word;\n outline: 7px solid #383838;\n height: 30px;\n font-size: 17px;\n text-align: center;\n transition: all .5s;\n max-width: 190px;\n font-weight: bold;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.input:hover {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}\n\n.input:focus {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"ce2486","snapshot":null,"tags":null,"title":"input by absoluteSTrange","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":983,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"input {\n display: inline-block;\n max-width: 196px;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n padding: 10px 20px;\n border: 5px solid #1fbc00;\n -webkit-border-radius: 11px;\n border-radius: 11px;\n font: normal 19px/normal \"Courier New\", Courier, monospace;\n color: rgba(42,255,0,1);\n -o-text-overflow: clip;\n text-overflow: clip;\n background: rgba(45,45,45,1);\n box-shadow: 0 0 9px 4px rgba(0,0,0,0.15) , -1px 4px 8px -1px rgba(0,0,0,0.49) inset;\n text-shadow: 1px 1px 0 rgba(255,255,255,0.66);\n transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);\n -webkit-transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n}\n\ninput:hover {\n -webkit-transform: rotateX(-15.62deg) rotateY(-23.65deg);\n transform: rotateX(-15.62deg) rotateY(-23.65deg);\n}\n\n.search__icon {\n height: 1.3em;\n width: 1.3em;\n fill: #b4b4b4;\n}\n\ninput:focus {\n outline: none;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"41f87f","snapshot":null,"tags":null,"title":"input by DellBee","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":297,"cssLen":1987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Enter Text\n

","css":"/* use it in dark theme */\n.input-container {\n position: relative;\n margin: 50px auto;\n width: 190px;\n}\n\n.input-container input[type=\"text\"] {\n font-size: 20px;\n color: rgb(255, 255, 255);\n border: none;\n border-bottom: 2px solid #a5a2a2;\n outline: none;\n width: 100%;\n background-color: transparent;\n}\n\n.label {\n transition: all 0.3s ease;\n color: #d3d2d2;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.input-container input[type=\"text\"]:focus~.label,\n .input-container input[type=\"text\"]:valid~.label {\n top: -20px;\n transition: 0.3s;\n color: rgb(172, 46, 172);\n}\n\n.input-container .underline {\n position: absolute;\n bottom: 4px;\n left: -7px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .sideline {\n position: relative;\n bottom: 15px;\n right: 18px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container .upperline {\n position: absolute;\n bottom: 30px;\n left: -8px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .line {\n position: relative;\n bottom: 17px;\n left: 178px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container input[type=\"text\"]:focus~.underline,\n .input-container input[type=\"text\"]:valid~.underline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.sideline,\n .input-container input[type=\"text\"]:valid~.sideline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.upperline,\n .input-container input[type=\"text\"]:valid~.upperline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.line,\n .input-container input[type=\"text\"]:valid~.line {\n transform: scaleX(1);\n transition: 1s;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"b42214","snapshot":null,"tags":null,"title":"input by ErzenXz","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":77,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n background-color: #F4F4F4;\n border: none;\n border-radius: 10px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n color: #333;\n font-family: \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n padding: 10px;\n width: 100%;\n max-width: 200px;\n height: 50px;\n line-height: 30px;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: background-color 0.3s ease-in-out;\n}\n\n.input:focus {\n background-color: #EAEAEA;\n}\n\n.input:disabled {\n background-color: #DADADA;\n color: #A3A3A3;\n}\n\n.input:read-only {\n background-color: #F4F4F4;\n color: #A3A3A3;\n cursor: not-allowed;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"dc3982","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":501,"cssLen":667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".group {\n display: flex;\n line-height: 28px;\n align-items: center;\n position: relative;\n max-width: 190px;\n}\n\n.input {\n width: 100%;\n height: 40px;\n line-height: 28px;\n padding: 0 1rem;\n padding-left: 2.5rem;\n border: 2px solid transparent;\n border-radius: 8px;\n outline: none;\n background-color: #f3f3f4;\n color: #0d0c22;\n transition: 0.3s ease;\n}\n\n.input::placeholder {\n color: #9e9ea7;\n}\n\n.input:focus,\ninput:hover {\n outline: none;\n border-color: rgba(234, 226, 183, 0.4);\n background-color: #fff;\n box-shadow: 0 0 0 4px rgb(234 226 183 / 10%);\n}\n\n.icon {\n position: absolute;\n left: 1rem;\n fill: #9e9ea7;\n width: 1rem;\n height: 1rem;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"e66984","snapshot":null,"tags":null,"title":"input by emmanuelh-dev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":260,"cssLen":1018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".block{display:block}.w-full{width:100%}.max-w-\\[220px\\]{max-width:220px}.appearance-none{-webkit-appearance:none;appearance:none}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:text-sm{font-size:0.875rem;line-height:1.25rem}}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"ba580f","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":150,"cssLen":507,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"Username\n ","css":".usernamelabel {\n display: block;\n color: white;\n font-size: 14px;\n padding: 5px 5px;\n}\n\n#usernameField {\n display: block;\n width: 200px;\n height: 40px;\n background-color: #292929;\n border-radius: 30px;\n border: 2px solid #292929;\n padding: 0px 12px;\n outline: none;\n caret-color: rgb(152, 88, 255);\n color: rgb(212, 212, 212);\n font-size: 12px;\n transition-duration: .2s;\n}\n\n#usernameField:focus,\n#usernameField:valid {\n border: 2px solid rgb(152, 88, 255);\n transition-duration: .2s;\n}\n\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"e12e88","snapshot":null,"tags":null,"title":"input by Harsha2lucky","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":2444,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n color: black;\n font: 1em/1.5 Hind, sans-serif;\n}\n\nform, .input, .caret {\n margin: auto;\n}\n\nform {\n position: relative;\n width: 100%;\n max-width: 17em;\n}\n\n.input, .caret {\n display: block;\n transition: all calc(1s * 0.5) linear;\n}\n\n.input {\n background: transparent;\n border-radius: 50%;\n box-shadow: 0 0 0 0.25em inset;\n caret-color: #255ff4;\n width: 2em;\n height: 2em;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.input:focus, .input:valid {\n background: powderblue;\n border-radius: 0.25em;\n box-shadow: none;\n padding: 0.75em 1em;\n transition-duration: calc(1s * 0.25);\n transition-delay: calc(1s * 0.25);\n width: 100%;\n height: 3em;\n}\n\n.input:focus {\n animation: showCaret 1s steps(1);\n outline: transparent;\n}\n\n.input:focus + .caret, .input:valid + .caret {\n animation: handleToCaret 1s linear;\n background: transparent;\n width: 1px;\n height: 1.5em;\n transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);\n}\n\n.input::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\nlabel {\n color: #e3e4e8;\n overflow: hidden;\n position: absolute;\n width: 0;\n height: 0;\n}\n\n.caret {\n background: black;\n border-radius: 0 0 0.125em 0.125em;\n margin-bottom: -0.6em;\n width: 0.25em;\n height: 1em;\n transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);\n transform-origin: 50% 0;\n}\n\n/* Animations */\n@keyframes showCaret {\n from {\n caret-color: transparent;\n }\n\n to {\n caret-color: #255ff4;\n }\n}\n\n@keyframes handleToCaret {\n from {\n background: currentColor;\n width: 0.25em;\n height: 1em;\n transform: translate(0,-1em) rotate(-45deg) translate(0,0.875em);\n }\n\n 25% {\n background: currentColor;\n width: 0.25em;\n height: 1em;\n transform: translate(0,-1em) rotate(-180deg) translate(0,0.875em);\n }\n\n 50%, 62.5% {\n background: #255ff4;\n width: 1px;\n height: 1.5em;\n transform: translate(0,-1em) rotate(-180deg) translate(7.5em,2.5em);\n }\n\n 75%, 99% {\n background: #255ff4;\n width: 1px;\n height: 1.5em;\n transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);\n }\n\n 87.5% {\n background: #255ff4;\n width: 1px;\n height: 1.5em;\n transform: translate(0,-1em) rotate(-180deg) translate(7.5em,0.125em);\n }\n\n to {\n background: transparent;\n width: 1px;\n height: 1.5em;\n transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em);\n }\n}"}]}},"actionData":null,"errors":null}