7

I need to hide the text box blinking cursor in CSS / Javascript.

Is it possible?

curtisk
  • 19,950
  • 4
  • 55
  • 71
Santhosh
  • 19,616
  • 22
  • 63
  • 74
  • Why? Is the user going to be entering data into that field? If so, this sounds like a usability nightmare. – Buggabill Jan 29 '10 at 13:28
  • Do you want them to enter into this textbox? What is the usage? You can always redirect the focus away on a click or focus event on the box...but what is the use case here? – curtisk Jan 29 '10 at 13:29
  • 1
    I certainly hope not. That would be quite annoying if I couldn't see where I was typing. – John Feminella Jan 29 '10 at 13:29
  • Do you want to hide it or change it for other type? – Amra Jan 29 '10 at 13:32
  • "I want to customize it where it should not look like text box" --> ok, you can change the looks, but it still needs to behave like a textbox – Natrium Jan 29 '10 at 13:47
  • Not necessarily a usability issue. For instance, if you have a number spinbox (``) and want to disable keyboard input with jQuery or something, your only means of changing the value would be to use the spinner controls. In this case the caret is misleading. –  Jun 15 '14 at 12:41
  • possible duplicate of [Hide textfield blinking cursor](http://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor) – Anko - inactive in protest Nov 26 '14 at 20:09
  • I have the same need. The input field is part of an animating element for a very brief period of time. During this time I'd like to hide the cursor. The need for the click before the animation to be the actual input is because iOS requires the click to be on an input for the keyboard to open. – Tony Topper Jun 27 '15 at 22:39

5 Answers5

14

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.

Kevin McTigue
  • 3,503
  • 2
  • 18
  • 22
  • but that also hides all text in the textbox.... i guess the author want something like allowing you to scroll the text but not show the blinking cursor... but that's just a guess as his question was 2 lines. – gcb Jan 16 '15 at 00:53
4

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.

Community
  • 1
  • 1
Lajos Mészáros
  • 3,756
  • 2
  • 20
  • 26
2

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.

sagittarian
  • 991
  • 1
  • 10
  • 14
1
<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>
gcb
  • 13,901
  • 7
  • 67
  • 92
  • I need to edit the text box but blinking cursor should not be shown. – Santhosh Jan 29 '10 at 13:35
  • @santose: Why? What's the issue with the cursor? just curious? – curtisk Jan 29 '10 at 13:37
  • I want to customize it where it should not look like text box – Santhosh Jan 29 '10 at 13:42
  • 4
    The correct attribute value is `disabled` and not `true`: `disabled="disabled"`. – Gumbo Jan 29 '10 at 13:51
  • 2
    @Gumbo: that's correct for XHTML, but there's not often a need to use XHTML. Easiest is to write pages in HTML and use just `disabled`, with no value. – Tim Down Jan 29 '10 at 14:06
  • 2
    @Tim Down: The correct value for HTML is `disabled` too. There it’s just that the attribute value can be omitted since the only valid attribute value `disabled` is implied (see http://www.w3.org/TR/html4/interact/forms.html#adef-disabled). – Gumbo Jan 29 '10 at 14:23
  • 1
    @Gumbo: well yes. There are two correct ways of using a boolean attribute in HTML 4: on its own with no value or with a value that is the same as its name. Neither is more correct than the other, although the following line at the bottom of http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 is worth noting: "Authors should be aware that many user agents only recognize the minimized form of boolean attributes and not the full form.". – Tim Down Jan 29 '10 at 15:07
  • 2
    How is this the right answer? This doesn't do what is asked for... What we're looking for is to hide the caret but still enable input – ditoslav Jun 13 '14 at 21:06
  • @curtisk, I don't know about the others here but the reason I would want to do this is in IE if you disable the textbox you can't scroll. So I need to make the textbox look disabled but still scrollable. – Jeremy Oct 27 '14 at 22:44
  • 14006 views. There must be some reason. Maybe you should think more. My reason is, that until certain point fields should pretend they are normal text. – Tomáš Zato Jan 15 '15 at 09:08
  • nobody see any utility in hiding the blinking cursor. unless you give more detail on the reason why you think that is useful, nobody can help you further :( – gcb Jan 16 '15 at 00:51
  • Textbox with disabled property does not catch click event but textbox with readonly does catch it!! – Mr_Hmp Jun 07 '17 at 14:11
0

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;
joegeringer
  • 101
  • 1
  • 4