{"id":29275,"date":"2020-01-16T18:17:00","date_gmt":"2020-01-16T07:17:00","guid":{"rendered":"https:\/\/codemyui.com\/?p=29275"},"modified":"2020-01-16T10:18:27","modified_gmt":"2020-01-15T23:18:27","slug":"text-field-placeholder-styles-when-active","status":"publish","type":"post","link":"https:\/\/codemyui.com\/text-field-placeholder-styles-when-active\/","title":{"rendered":"Text Field Placeholder Styles When Active"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is really handy snippet that can help your <a href=\"https:\/\/codemyui.com\/tag\/ux\/\" class=\"rank-math-link\">UX<\/a>, it offers 4 different styles for the placeholder text for your <a href=\"https:\/\/codemyui.com\/tag\/text-field\/\" class=\"rank-math-link\">text field<\/a>. When you start typing the placeholder is moved out of the way but is still in view so it&#8217;s helpful for users. The positions available are as follows:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>below the text field on the left<\/li><li>above the text field on the right<\/li><li>below entered text within the text field on the left<\/li><li>above the entered text within the text field on the left<\/li><\/ol>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/6994044eee98ce79a268e059bea66fe3\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"rank-math-link\">GitHub<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Placeholder Styles Snippet<\/h2>\n\n\n<p class='codepen'  data-height='782' data-theme-id='0' data-slug-hash='PpEQRM' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Form inputs with helper text by Darin (@dsenneff) on CodePen.<\/p>\n\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is really handy snippet that can help your UX, it offers 4 different styles for the placeholder text for your text field. When you start typing the placeholder is moved out of the way but is still in view so it&#8217;s helpful for users. The positions available are as follows: below the text field&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/text-field-placeholder-styles-when-active\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":29278,"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":true,"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":[4920130,13170349,81969],"class_list":["post-29275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-text-field","tag-input-field","tag-ux","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Text-Field-Placeholder-Styles-When-Active.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":261,"url":"https:\/\/codemyui.com\/suggest-email-domain-in-email-field\/","url_meta":{"origin":29275,"position":0},"title":"Suggest email domain in email field","author":"Hima Vincent","date":"June 1, 2015","format":false,"excerpt":"This is a great material design email form where you can suggest email domains when the user adds an @ symbol in the text field. Mobile users might find this very helpful. Designed by Ben Mildren If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"Suggest email domain in email field","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/suggest-email-domain-in-email-field.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/suggest-email-domain-in-email-field.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/suggest-email-domain-in-email-field.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/suggest-email-domain-in-email-field.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":220,"url":"https:\/\/codemyui.com\/input-field-placeholder-to-label-transition\/","url_meta":{"origin":29275,"position":1},"title":"Input Field Placeholder to Label Transition","author":"Hima Vincent","date":"July 16, 2015","format":false,"excerpt":"This is a great example of material design input field from. The placeholder text transitions to the input field fable on click. Designed by Andrew Tunnecliffe\u00a0 If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Input Field Placeholder to Label Transition","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/input-field-placeholder-to-label-transition.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/input-field-placeholder-to-label-transition.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/input-field-placeholder-to-label-transition.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/input-field-placeholder-to-label-transition.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30241,"url":"https:\/\/codemyui.com\/login-modal-with-floating-placeholder-and-animated-neon-submit-button\/","url_meta":{"origin":29275,"position":2},"title":"Login Modal With Floating Placeholder And Animated Neon Submit Button","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Soufiane Khalfaoui Hassani If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Login Screen With A Neon Button Snippet","rel":"","context":"In \"login form\"","block_context":{"text":"login form","link":"https:\/\/codemyui.com\/tag\/login-form\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25286,"url":"https:\/\/codemyui.com\/password-strength-indicator-signup-forms\/","url_meta":{"origin":29275,"position":3},"title":"Password Strength Indicator for Signup Forms","author":"Saijo George","date":"December 18, 2017","format":false,"excerpt":"Here are a bunch of password strength validation UX for signup pages designed by Alexandr Izumenko . Based on the dribbble shots by Josh Overton. There are four different styles to choose from: The 1st one has a progress bar like interface that shows red, orange and green for varying\u2026","rel":"","context":"In \"input field\"","block_context":{"text":"input field","link":"https:\/\/codemyui.com\/tag\/input-field\/"},"img":{"alt_text":"Password Strength Indicator for Signup Forms","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/password-strength-indicator-for-signup-forms.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/password-strength-indicator-for-signup-forms.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/password-strength-indicator-for-signup-forms.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/12\/password-strength-indicator-for-signup-forms.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30557,"url":"https:\/\/codemyui.com\/strikethrough-text-with-explanations-in-modal-on-hover\/","url_meta":{"origin":29275,"position":4},"title":"Strikethrough Text With Explanations In Modal On Hover","author":"Hima Vincent","date":"August 2, 2021","format":false,"excerpt":"Code by: eightarmshq If you are having trouble with the pen, try the archived copy on GitHub. Strikethrough Text In Modal On Hover Snippet","rel":"","context":"In \"del ins\"","block_context":{"text":"del ins","link":"https:\/\/codemyui.com\/tag\/del-ins\/"},"img":{"alt_text":"Strikethrough Text With Explanations In Modal On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29281,"url":"https:\/\/codemyui.com\/search-text-field-with-icon-to-search-result-in-card-ui\/","url_meta":{"origin":29275,"position":5},"title":"Search Text Field With Icon to Search Result in Card UI","author":"Saijo George","date":"January 16, 2020","format":false,"excerpt":"This a very chique search field animation by Aaron Iker. When you search for a term in the text field the magnifying glass scans the text and transforms the text field into a card-style layout where you can display the results...noice. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"search field\"","block_context":{"text":"search field","link":"https:\/\/codemyui.com\/tag\/search-field\/"},"img":{"alt_text":"Search Text Field With Icon to Search Result in Card UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Search-Text-Field-With-Icon-to-Search-Result-in-Card-UI.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\/Search-Text-Field-With-Icon-to-Search-Result-in-Card-UI.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Search-Text-Field-With-Icon-to-Search-Result-in-Card-UI.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Search-Text-Field-With-Icon-to-Search-Result-in-Card-UI.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\/29275","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=29275"}],"version-history":[{"count":3,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29275\/revisions"}],"predecessor-version":[{"id":29280,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29275\/revisions\/29280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/29278"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=29275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=29275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=29275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}