{"id":2160,"date":"2016-07-23T09:24:15","date_gmt":"2016-07-23T09:24:15","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2160"},"modified":"2023-10-13T10:13:58","modified_gmt":"2023-10-13T10:13:58","slug":"create-floating-labels-with-css-float-and-other-properties","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/","title":{"rendered":"Create Floating Labels with CSS Float and other Properties"},"content":{"rendered":"

Floating labels for input fields by using CSS<\/strong><\/h3>\n

In this tutorial, floating labels for the form input fields are created by using CSS float and other properties.<\/p>\n

The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard.<\/p>\n

Have a look at the code and online demo in the following section where a form is created with floating labels.<\/p>\n

A demo of creating floating labels as using CSS float property<\/strong><\/h3>\n

See the following example where a form is created with a few general fields like Name, Email etc. As the demo page loads, the form fields are filled with the labels inside the text boxes or text area. When you enter the mouse inside any textbox, the label will \u201cfloat\u201d upwards to the top of that respective textbox. Have a look by clicking the image or link below:<\/p>\n

\"CSS<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

Following is the CSS:<\/p>\n

body {\r\n\r\n\u00a0 background: #C4E1E1;\r\n\r\n\u00a0 font-family: Verdana, sans-serif;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.page-wrap {\r\n\r\n\u00a0 max-width: 500px;\r\n\r\n\u00a0 margin: 0 auto;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\nh2 {\r\n\r\n\u00a0 color: #408080;\r\n\r\n\u00a0 font-size: 20px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\ninput:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {\r\n\r\n\u00a0 font-size: 0.75em;\r\n\r\n\u00a0 color: #8e44ad;\r\n\r\n\u00a0 top: -2.25rem;\r\n\r\n\u00a0 -webkit-transition: all 0.125s ease-in-out;\r\n\r\n\u00a0 transition: all 0.2s ease-in-out;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.floating-field {\r\n\r\n\u00a0 float: right;\r\n\r\n\u00a0 width: 33.3333%;\r\n\r\n\u00a0 margin: 2rem 0 1rem;\r\n\r\n\u00a0 position: relative;\r\n\r\n\u00a0 border:1px black #2C5656;\r\n\r\n}\r\n\r\n.floating-field label {\r\n\r\n\u00a0 color: #C5E2E2;\r\n\r\n\u00a0 padding: 1rem;\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 top: 0;\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 -webkit-transition: all 0.25s ease-in-out(0.2, 0, 0.03, 1);\r\n\r\n\u00a0 transition: all 0.25s ease-in-out;\r\n\r\n\u00a0\r\n\r\n}\r\n\r\n.floating-field.wide {\r\n\r\n\u00a0 width: 100%;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\ninput, textarea {\r\n\r\n\u00a0 padding: 1rem 1rem;\r\n\r\n\u00a0 border: 1px solid #008000;\r\n\r\n\u00a0 width: 100%;\r\n\r\n\u00a0 font-size: 1rem;\r\n\r\n}\r\n\r\ninput ~ span, textarea ~ span {\r\n\r\n\u00a0 display: block;\r\n\r\n\u00a0 width: 0;\r\n\r\n\u00a0 height: 3px;\r\n\r\n\u00a0 background: #8e44ad;\r\n\r\n\u00a0 position: absolute;\r\n\r\n\u00a0 bottom: 0;\r\n\r\n\u00a0 left: 0;\r\n\r\n\u00a0 -webkit-transition: all 0.125s ease-in-out;\r\n\r\n\u00a0 transition: all 0.125s ease-in-out;\r\n\r\n}\r\n\r\ninput:focus, textarea:focus {\r\n\r\n\u00a0 outline: 0;\r\n\r\n}\r\n\r\ninput:focus ~ span, textarea:focus ~ span {\r\n\r\n\u00a0 width: 100%;\r\n\r\n\u00a0 -webkit-transition: all 0.125s ease-in-out;\r\n\r\n\u00a0 transition: all 0.125s ease-in-out;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\ntextarea {\r\n\r\n\u00a0 width: 100%;\r\n\r\n\u00a0 min-height: 13em;\r\n\r\n}<\/pre>\n
The markup:<\/strong><\/p>\n
<div class=\"page-wrap\">\r\n\r\n\u00a0 <h2>A pure CSS floating label solution<\/h2>\r\n\r\n\u00a0 <form>\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"floating-field\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" required \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Your Name<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <span><\/span>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"floating-field\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"email\" required \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Your Email<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <span><\/span>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"floating-field\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"tel\" required \/>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Mobile No:<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <span><\/span>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"floating-field wide\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <textarea required><\/textarea>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Feedback \/ Enquiry<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <span><\/span>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0 <\/form>\r\n\r\n<\/div><\/pre>\n
You can see, CSS transition is used for the floating labels with\u00a0ease-in-out value.<\/p>\n
Get the complete code and view the live demo on the demo page.<\/p>\n
(Credit: skielbasa<\/a>)<\/p>\n","protected":false},"excerpt":{"rendered":"
Floating labels for input fields by using CSS In this tutorial, floating labels for the form input fields are created by using CSS float and other properties. The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard. Have a look at the code … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2161,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[30],"yoast_head":"\nCreate Floating Labels with CSS Float and other Properties<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Floating Labels with CSS Float and other Properties\" \/>\n<meta property=\"og:description\" content=\"Floating labels for input fields by using CSS In this tutorial, floating labels for the form input fields are created by using CSS float and other properties. The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard. Have a look at the code ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-23T09:24:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-13T10:13:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/11.0_1-CSS-floating-form.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"553\" \/>\n\t<meta property=\"og:image:height\" content=\"289\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/\",\"url\":\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/\",\"name\":\"Create Floating Labels with CSS Float and other Properties\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-23T09:24:15+00:00\",\"dateModified\":\"2023-10-13T10:13:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Floating Labels with CSS Float and other Properties\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Floating Labels with CSS Float and other Properties","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/","og_locale":"en_US","og_type":"article","og_title":"Create Floating Labels with CSS Float and other Properties","og_description":"Floating labels for input fields by using CSS In this tutorial, floating labels for the form input fields are created by using CSS float and other properties. The text field labels float upwards as any textbox gets focused by pressing the mouse click or tab key from the keyboard. Have a look at the code ... Read more","og_url":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/","article_published_time":"2016-07-23T09:24:15+00:00","article_modified_time":"2023-10-13T10:13:58+00:00","og_image":[{"width":553,"height":289,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/11.0_1-CSS-floating-form.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/","url":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/","name":"Create Floating Labels with CSS Float and other Properties","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-23T09:24:15+00:00","dateModified":"2023-10-13T10:13:58+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/create-floating-labels-with-css-float-and-other-properties\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Create Floating Labels with CSS Float and other Properties"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2160"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2160"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2160\/revisions"}],"predecessor-version":[{"id":10704,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2160\/revisions\/10704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2161"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}