Textbox Custom Cavet |...?

Hi there. Before I describe my question as a whole, I would like to explain what the word cavet means.

Cavet as mentioned in the title, is the line that blinks, when you have selected a textbox. This is everywhere; Google Searchfield, Roblox Textboxes ect.

I was wondering if anyone knew a method on how to create a custom cavet, for the Roblox Textboxes?
I have already tried to create one myself, and with some quite good success, but it had a few flaws.

After I got stuck with trying to fix the flaws mine had, I searched up on the topic, and only found one thread which couldn’t help.

Here is the criterias that I am trying to give my cavet:

  • When Textbox is focused, cavet should blink
  • When you write in the textbox, cavet should be visible all the time and move to the correct position
  • When you click/tab & drag over the text, the cavet should follow the input position
  • When you click/tab somewhere in the text, the cavet should be aligned to the correct position

My current setup:

  • I have 3 layers
    Top layer: Frame that acts like the Cavet
    Middle layer: Textbox with invisible text, also added UIStroke with 1 in transparency (this is to remove the default cavet)
    Bottom layer: Textlabel that always shows the text of Textbox.