{"id":24922,"date":"2017-11-06T15:45:50","date_gmt":"2017-11-06T05:45:50","guid":{"rendered":"https:\/\/codemyui.com\/?p=24922"},"modified":"2018-05-16T16:35:58","modified_gmt":"2018-05-16T06:35:58","slug":"input-highlight-seen-tripadvisor","status":"publish","type":"post","link":"https:\/\/codemyui.com\/input-highlight-seen-tripadvisor\/","title":{"rendered":"Input Highlight as seen on Tripadvisor"},"content":{"rendered":"<p>This is the input highlight <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a> <a href=\"https:\/\/codemyui.com\/tag\/deconstruction\/\">as seen on<\/a> Tripadvisor <a href=\"https:\/\/codemyui.com\/tag\/search-field\/\">search<\/a>, as you enter the input the underscore highlight effect level with the end of the text. Designed by <a href=\"https:\/\/twitter.com\/PetrGazarov\" target=\"_blank\" rel=\"noopener\">Petr Gazarov<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/6da3a646cdc2165435914c731f7d19a2\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Tripadvisor Input Highlight Snippet<\/h2>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='JyXvzB' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Tripadvisor input highlight by Petr Gazarov (@petrgazarov) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/input-highlight-seen-tripadvisor\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":24923,"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":[59500,13170349,11731763],"class_list":["post-24922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-deconstruction","tag-input-field","tag-search-field","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/input-highlight-as-seen-on-tripadvisor.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":2571,"url":"https:\/\/codemyui.com\/highlight-search-keyword-text\/","url_meta":{"origin":24922,"position":0},"title":"Highlight Search Keyword In Text","author":"Hima Vincent","date":"October 13, 2016","format":false,"excerpt":"In this code snippet, when you search for any text in the given search box all occurrence of that particular search term in the body are highlighted. Designed by Paul Grant. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Highlight Search Keyword In Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/search-text-highlight.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/search-text-highlight.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/search-text-highlight.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/search-text-highlight.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":24922,"position":1},"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":28742,"url":"https:\/\/codemyui.com\/update-css-on-regex-validation-for-input-fields\/","url_meta":{"origin":24922,"position":2},"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":13968,"url":"https:\/\/codemyui.com\/emoji-search\/","url_meta":{"origin":24922,"position":3},"title":"Emoji Search","author":"Hima Vincent","date":"March 27, 2017","format":false,"excerpt":"This is a nice emoji search field designed by Johan Haneveld. When you type something in something it pulls up relevant emojis. If you are having trouble with the pen, try the archived copy on GitHub Emoji Search Snippet","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/text-input-with-emoji.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/text-input-with-emoji.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/text-input-with-emoji.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/text-input-with-emoji.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29091,"url":"https:\/\/codemyui.com\/password-reveal-search-light-effect-login-form\/","url_meta":{"origin":24922,"position":4},"title":"Password Reveal Search Light Effect Login Form","author":"Saijo George","date":"January 4, 2020","format":false,"excerpt":"With this login form designed by Ryan Mulligan, when you click on the reveal password icon in the password field it shines a searchlight on the *** in the password field to reveal its real content. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Password Reveal Search Light Effect Login Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Password-Reveal-Search-Light-Effect-Login-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Password-Reveal-Search-Light-Effect-Login-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Password-Reveal-Search-Light-Effect-Login-Form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Password-Reveal-Search-Light-Effect-Login-Form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12446,"url":"https:\/\/codemyui.com\/search-icon-search-bar-morph\/","url_meta":{"origin":24922,"position":5},"title":"Search Icon To Search Bar Morph","author":"Hima Vincent","date":"March 9, 2017","format":false,"excerpt":"This fancy search icon will morph into a search field on click, it was designed by Gregor Adams. If you are having trouble with the pen, try the archived copy on GitHub Seach Input Animation Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Search Icon To Search Bar Morph","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.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\/24922","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=24922"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24922\/revisions"}],"predecessor-version":[{"id":25689,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24922\/revisions\/25689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24923"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}