input typing caret
Unanswered
Nile tilapia posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
Does anyone know if there is a way to edit the typing caret? i am trying to recreate the typing caret from the linux terminal
https://i.givemeyourcreditcard.info/71yofyvg.png
https://i.givemeyourcreditcard.info/71yofyvg.png
19 Replies
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
caret-shape: block
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
1 sec I can look when I get to my pc
damn and the way they show you can fake it is not actually in a input
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
oh... i didn't see that
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
its fine
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
but yeah safe to say there is no easy way to do this, you need some css shenanigans or js libs
browsers dont support that css property yet
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
do you know any ts libs that can do something like this?
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
i don't know any, but searching for some at the moment
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
you can use monaco editor if it's suitable for your purpose, it has
cursorStyle: "block"
but it's not for every type of input
that's the only way i can find honestly. other than that, you can kinda do it by
* get the position of the caret (search on google, there are some stackoverflow questions with working but ugly code but that's the best we can do)
* use css to render a fake blinking rectangle absolutely positioned to the position calculated above
* use
but i can't imagine the amount of edge cases this method has. what if someone resizes the browser? what to do when the input is unfocused? and a ton of other questions that you need to answer
* get the position of the caret (search on google, there are some stackoverflow questions with working but ugly code but that's the best we can do)
* use css to render a fake blinking rectangle absolutely positioned to the position calculated above
* use
caret-color
to hide the caretbut i can't imagine the amount of edge cases this method has. what if someone resizes the browser? what to do when the input is unfocused? and a ton of other questions that you need to answer
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
does it work on the default text input
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
No it doesn’t
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
💀
then what does it work with
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
Go read what it is
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Nile tilapiaOP
i might just wait until they add native support because i cant find anything on monaco editor for react i may just be blind and dont feel like messing around with a very not well put together work around