Close

Floating Labels

This is an example of a floating label layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The JavaScript functions have been used to implement the floating functionality of the labels. The body of the form is given the styles of min-height as 100vh, background as HSL(215,21%,24%), font-family as 'Roboto Condensed', sans-serif, and letter-spacing as 0.1em. The input label has the styles of display as block, height as 100%, width as 35%, padding-left and padding-right as 0.75em, background as HSL(320,69%,53%), color as white, line-height as 2.5rem, text-transform as uppercase to automatically convert the text to uppercase, and transition as transform 0.3s ease-in-out. The input field has the styles of height as 2.5rem, width as 100%, padding-left as 38%, color as HSL(215,21%,24%), border as 1px solid HSL(320,69%,53%), and transition as padding-left 0.3s ease. When an input field is checked, the border and the label color becomes HSL(90,44%,71%), and the font color becomes white. Source: https://codepen.io/meowwwls/pen/JGbwKw

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.