Reputation: 20406
I need to hide the text box blinking cursor in CSS / Javascript.
Is it possible?
Upvotes: 7
Views: 25864
Reputation: 101
If it's an input with the readonly="readonly" attribute on it, Safari on iOS still shows a blinking cursor when focusing on it.
So to remove the blinking, the following worked for me:
-webkit-user-select: none;
user-select: none;
Upvotes: 0
Reputation: 3871
Here is my solution from another question, that I answered already:
https://stackoverflow.com/a/23472096/1806628
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.
input[type="text"]{ color : transparent; text-shadow : 0 0 0 #000; } input[type="text"]:focus{ outline : none; }
Warning:
It does not seem to work under iOS 8. (Thanks @Altaveron for the info)
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.
Upvotes: 4
Reputation: 14548
<input type=text disabled="disabled"/>
because i can't see any other reason you might want to do that.
edit:
i guess you want to allow the user to scroll the text that is larger than the area, but not show the blinking?
if that is so, you still want to disable it. not just hide the blinking cursor. if the user can't type there, it should be disabled. period.
now, if you still want to allow the user to see all the content, you have to make the input as big as the content. there is no escaping that.
and then limit the size with a parent div
with CSS overflow: hidden
or scroll
.
<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>
Upvotes: 1
Reputation: 1094
This is pretty old, but I was just dealing with a similar issue. For browsers that support it (meaning, not IE8), you can set the color of the input element to be the same as its background (probably white), and then the cursor will be invisible.
Upvotes: 2
Reputation: 3503
You could set a maxlength
on the textbox and then use text-indent
to move the cursor back more characters than the maxlength.
For example, you could set maxlength=20
and then for the text box set text-indent: -20em
that way the text starts out of the box's boundaries and can't ever come into view.
Upvotes: 14