{"id":21858,"date":"2020-07-16T07:27:40","date_gmt":"2020-07-16T07:27:40","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=21858"},"modified":"2020-07-16T08:40:33","modified_gmt":"2020-07-16T08:40:33","slug":"input-field-with-underline-under-each-character","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/input-field-with-underline-under-each-character\/","title":{"rendered":"INPUT FIELD WITH UNDERLINE UNDER EACH CHARACTER"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Ana Tudor<\/li><li>January 15, 2017<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML \/ CSS (SCSS)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is an amazing and simple Input Field which is created with Underline under each character. Try deleting and writing something else in the input field. It uses the\u00a0<code>ch<\/code>\u00a0unit whose width is the width of the\u00a0<code>0<\/code>\u00a0character. It also assumes the font in the\u00a0<code>input<\/code>\u00a0field is a monospace one so that all characters have the same width. So the width for every character is always\u00a0<code>1ch<\/code>. The gap between the characters is taken to be\u00a0<code>.5ch<\/code>. This is the value we set for\u00a0<code>letter-spacing<\/code>. The\u00a0<code>width<\/code>\u00a0of the\u00a0<code>input<\/code>\u00a0is the number of characters times the sum between the letter width (<code>1ch<\/code>) and the gap width (<code>.5ch<\/code>). So that&#8217;s\u00a0<code>7*(1ch + .5ch) = 7*1.5ch = 10.5ch<\/code>. We remove the actual\u00a0<code>border<\/code>\u00a0of the\u00a0<code>input<\/code>\u00a0and we set a fake one using a\u00a0<code>repeating-linear-gradient<\/code>. The dash (dimgrey) goes from\u00a0<code>0<\/code>\u00a0to\u00a0<code>1ch<\/code>\u00a0and the gap (<code>transparent<\/code>) starts immediately after the dash and goes to\u00a0<code>1.5ch<\/code>. It&#8217;s attached to the left and the bottom of the input &#8211; this is the\u00a0<code>background-position<\/code>\u00a0component (<code>0%<\/code>\u00a0horizontally and\u00a0<code>100%<\/code>\u00a0vertically). It spreads across the entire input horizontally (<code>100%<\/code>\u00a0in the ideal case, the input width minus the gap to take care of rendering issue in Chrome and Firefox) and is\u00a0<code>2px<\/code>\u00a0tall &#8211; this is the\u00a0<code>background-size<\/code>\u00a0component of the\u00a0<code>background<\/code>.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> No<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/thebabydino\/share\/zip\/mRrPwB\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/thebabydino\/pen\/mRrPwB\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Ana Tudor January 15, 2017 Made with: HTML \/ CSS (SCSS) About the code: This is an amazing and simple Input Field which is created with Underline under each character. Try deleting and writing something else in the input field. It uses the\u00a0ch\u00a0unit whose width is the width of the\u00a00\u00a0character. It also assumes the font in the\u00a0input\u00a0field is a monospace one so that all characters have the same width. So the width for every character is always\u00a01ch. The gap between the characters is taken to be\u00a0.5ch. This is the value we set for\u00a0letter-spacing. The\u00a0width\u00a0of the\u00a0input\u00a0is the number of characters times the sum between the letter width (1ch) and the gap width (.5ch). So that&#8217;s\u00a07*(1ch + .5ch) = 7*1.5ch = <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":21859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1697],"tags":[20,1699,6116,6113,3859],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21858"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=21858"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21858\/revisions"}],"predecessor-version":[{"id":21860,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21858\/revisions\/21860"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/21859"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=21858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=21858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=21858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}