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é