Hide textfield blinking cursor

user_272501 0
Viewed 102479

I have a textfield is there a way to hide the blinking text cursor? I say this because I am doing a horror/mystery website and one of the clues is to start typing anywhere.

Maybe I can do it with javascript?

textfield html
12 Answers

caret-color: transparent !important; works in newer browsers

user_3462590

Setting the input to readonly also does this since it prevents focus but it may not be applicable to many use cases that still need it.

<input type="text" readonly />
user_8000930

List of recommended css solutions to hide the caret

  1. caret-color: transparent; - For my case this approach wasn't good enough since you're still able to manipulate the input field in order to show the caret on ios. You can reproduce it on an ipad by focusing on an input then press the keyboard button that brings the keyboard down. After that you can simply just click on the input field again and suddenly the caret appears. I have also been able to see the cursor on iphones but i'm not exactly sure how to reproduce it since it seems kind of random.
  1. opacity: 0 - This approach does not work on android devices since you won't be able to focus on the input. Another thing I don't like is the fact that the site wouldn't automatically scroll up/down to the input after focusing.
  1. text-indent: -9999em; - This isn't really a solution in itself since the caret always would be in the left upper corner of the input, atleast on ios devices. Though if you set the width of the input to overflow the website's width then you wouldn't be able to see the caret.
  1. visibility: hidden; display: none; - These solutions do remove the caret but you'll not be able to focus on the input, not even if you've implemented a click event to do it.
  1. font-size: 0; - I do not recommend this approach since it doesn't work on adroid devices and apparently some windows computers. The browser will also zoom in on the input if the font-size is less than 16px therefore you would have to add maximum-scale=1 to the meta viewport tag. You would also have to display the input somewhere else than the input field.

What I did

I ended up not using any of these methods since they didn't work well for my project. I instead used a lightweight code editor like Lajos Mészáros also recommended and made the height of the input 0. That also means you'll need to make a click event on another element that sets the focus for the input. You can look at Monkeytype for reference (I'm not affiliated to that website).

user_117973480
Related