Hello,
I'm trying to make a register form with animated labels, the problem is that the input mask of the date will be on top of the label. Is there a way to hide the input mask until i've clicked on the label? Screenshots:
Nick Vandebriel wrote:
Never mind I managed to find a solution. I used a variable ShowDateMask and assigned 0 as default value. In the style property of the date field i placed:
"color: rgba(0, 0, 0, "+ ShowDateMask+ ");"
I made an action when clicking on the container of the animated label to set the "ShowDateMask" variable to 1. I also used an OnBlur() action on the date field where I check if the date was filled in (nulldate()) if not I put the variable back on 0.
Regards,
Nick
Hi Nick,
Nice that you found a solution.
Just for reference, you could also do that by using just the following css:
.animated-label.active .animated-label-input input[data-input], .animated-label.active .animated-label-input input[data-input]:empty { color: initial; } .animated-label-input input[data-input], .animated-label-input input[data-input]:empty { color: transparent; }
Cheers,
José