GitHub<\/a><\/p>\n\nSee the Pen Custom input number by Dmitry (@famed) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
This is something that you can use on your website where you want to take a numeric input from the user. You can use the plus and minus sign to increase or decrease the number. Alternatively, you can just click in the center area and add a number by yourself. Designed by Dmitry.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":4076,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[13170349,16926259],"class_list":["post-4073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-input-field","tag-range-slider","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/custom-input-field.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":28742,"url":"https:\/\/codemyui.com\/update-css-on-regex-validation-for-input-fields\/","url_meta":{"origin":4073,"position":0},"title":"Update CSS on RegEx Validation for input fields","author":"Saijo George","date":"November 2, 2019","format":false,"excerpt":"Here is a simple validation using repoCSS.js that lets you run RegEX validation on input fields and turns the input field background red when it detects a pattern. If you are having trouble with the pen, try the archived copy on GitHub RegEx Validation Snippet","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"RegEx Validation for input fields","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/RegEx-Validation-for-input-fields.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24922,"url":"https:\/\/codemyui.com\/input-highlight-seen-tripadvisor\/","url_meta":{"origin":4073,"position":1},"title":"Input Highlight as seen on Tripadvisor","author":"Hima Vincent","date":"November 6, 2017","format":false,"excerpt":"This is the input highlight text effect as seen on Tripadvisor search, as you enter the input the underscore highlight effect level with the end of the text. Designed by Petr Gazarov. If you are having trouble with the pen, try the archived copy on GitHub Tripadvisor Input Highlight Snippet","rel":"","context":"In \"deconstruction\"","block_context":{"text":"deconstruction","link":"https:\/\/codemyui.com\/tag\/deconstruction\/"},"img":{"alt_text":"Input Highlight as seen on Tripadvisor","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/input-highlight-as-seen-on-tripadvisor.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/input-highlight-as-seen-on-tripadvisor.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/input-highlight-as-seen-on-tripadvisor.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/input-highlight-as-seen-on-tripadvisor.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25646,"url":"https:\/\/codemyui.com\/tick-animation-in-css-input-checkbox\/","url_meta":{"origin":4073,"position":2},"title":"Tick Animation in CSS Input Checkbox","author":"Saijo George","date":"April 29, 2018","format":false,"excerpt":"A simple CSS only tick mark animation for checkbox input field designed by Rab Rennie. If you are having trouble with the pen, try the archived copy on GitHub Tick Animation Snippet","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"Tick Animation in CSS Input Checkbox","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Tick-Animation-in-CSS-Input-Checkbox.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Tick-Animation-in-CSS-Input-Checkbox.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Tick-Animation-in-CSS-Input-Checkbox.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Tick-Animation-in-CSS-Input-Checkbox.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17723,"url":"https:\/\/codemyui.com\/login-form-input-field-focus-animation\/","url_meta":{"origin":4073,"position":3},"title":"Login Form with Input Field Focus Animation","author":"Hima Vincent","date":"June 5, 2017","format":false,"excerpt":"A simple login form design in Card UI designed by Yugam. The underline on the active input field flows down with an animation when another input field is selected. If you are having trouble with the pen, try the archived copy on GitHub Input Field Focus Animation Snippet","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Login Form with Input Field Focus Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/login-form-with-input-field-focus-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29397,"url":"https:\/\/codemyui.com\/input-field-label-wave-animation-on-click\/","url_meta":{"origin":4073,"position":4},"title":"Input Field Label Wave Animation on Click","author":"Saijo George","date":"February 6, 2020","format":false,"excerpt":"This is a nice HTML animation for the labels on input fields like text fields by Florin Pop. When you click on the input field the label which is shown as the default text, jump sup tot the top of the field in a smooth wave animation. If you are\u2026","rel":"","context":"In \"text field\"","block_context":{"text":"text field","link":"https:\/\/codemyui.com\/tag\/text-field\/"},"img":{"alt_text":"Input Field Label Wave Animation on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7597,"url":"https:\/\/codemyui.com\/login-form-visual-cues-invalid-input\/","url_meta":{"origin":4073,"position":5},"title":"Login Form with Visual Cues for Invalid Input","author":"Hima Vincent","date":"February 26, 2017","format":false,"excerpt":"This login form provides visual cues by wiggling the input field when an invalid input is entered. It also notifies the visitor when the password is wrong and also notify the user the number of retries left. This is designed by Nathan Taylor. If you are having trouble with the\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/loginform.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=4073"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4073\/revisions"}],"predecessor-version":[{"id":25990,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4073\/revisions\/25990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4076"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}