Floating label states
The form is always within this container and at first load I wanted to keep the subtle grey background.
But combined with floating labels this looked off. So on focus it creates a block border and high contrast floating label for better readability.
It looked way too heavy with this applied to all the inputs on blur. So when the field has a value, but is not focused. The border changes to a light grey, and the input background switches to white along with the label.
All done with CSS selectors and a simple check for content with JavaScript `this.inputData && this.inputData.length > 0` if the content is found it applies a class called float to the input wrapper
More by seam · studios View profile
Like