Limit max and min number of characters in input + design question

Hi guys

I m asking customers for their phone number.
I added an input where I can set the max number of characters.


My logic question is:

  • I am not able to set the minimum number of characters

My design questions are (i would love to have in it this order):

  • When the page is loaded and the input is empty i want the background colour to be black
  • Only after the customer click on the input (not only when is hovered or pressed) I want it to have always a white background
  • Only when the number of characters will reach 10 characters then in the input background should go back to be black

You have any ideas?

Thanks