html - Hide textfield blinking cursor

Question

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?

Answer 1

The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.

Use this link to see it live in jsfiddle.

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

Update:

Known to not work in iOS 8 and IE 11

---

Another idea of my is a bit more hacky and requires javascript.

HTML and CSS part:

You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike. You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.

Javascript part:

After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.

Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.