CSS Change Color Of Focus Rectangle (Location Focus)

Question

I have a textarea with transparent text. I need it to be transparent to work around a problem I'm having with Highlight.js.

It works fine, but there is a problem though. The user doesn't know where he is in the textarea. I need the focus rectangle (that's what it's called in the Windows UI apparently) to have specific properties. In this case it must be white and flickering. The rest of the text should stay transparent.

textarea {
  color: transparent;
  z-index: 1;
}

Like that, but with a white focus rectangle.

EDIT:

People seem to misunderstand me. I don't want to edit the cursor. I want the edit the vertical flickering dash that indicated where you're editing in the textarea.

EDIT2:

It's called a caret apparently.

you need a white rectangle outline when the text-area is focused, if I understand it right ? — Akhil Arjun, Feb 06 '17 at 07:04
No. I meant the flickering vertical dash that indicates where you're currently working in the textarea. — user3351731, Feb 06 '17 at 07:08
you can't edit the cursor styling using CSS. What I am assuming is you want a UNIX/cmd style cursor — Akhil Arjun, Feb 06 '17 at 07:09
No just the styling as usual, but I need the color to be white. Different than the color of the text. — user3351731, Feb 06 '17 at 07:11
And I don't mean the cursor. I mean the location indicator when typing. — user3351731, Feb 06 '17 at 07:12
Can, you please put a demo image here along with the question on what you want. And I would try if i can help :) — Akhil Arjun, Feb 06 '17 at 07:12
Maybe you should look at this question, let me know if it helps [Stackoverflow Question](http://stackoverflow.com/questions/3758023/how-to-use-this-square-cursor-in-a-html-input-field) — Akhil Arjun, Feb 06 '17 at 07:18

SGR Dalal · Answer 1 · 2017-02-06T07:21:30.347

-1

Hey You can refer the following Blog for your requiremenr :

https://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/

Let me know if is it helpfull to you.

code:

input, textarea {
    cursor: url(cursor.cur);
}

edited Feb 06 '17 at 07:21

answered Feb 06 '17 at 07:12

SGR Dalal

121
13

Hi. I don't mean the cursor. I mean the vertical dash that indicated where you're editing in the textarea. It's that flickering thing. – user3351731 Feb 06 '17 at 07:14
That vertical thing is called the caret. and even `caret` you can't style using CSS – Akhil Arjun Feb 06 '17 at 07:15
yeah, Akhil is righr. @user3351731 i have posted right Link for your issue you can use it by downloading .cur file as your need. and follow the code as above mention. i am talking about thae same thing of vertical flicker – SGR Dalal Feb 06 '17 at 07:21
You're talking about custom pointers, if i'm not mistaken. Like this http://beradrian.users.sourceforge.net/articles/cursor.html . – user3351731 Feb 06 '17 at 08:16

CSS Change Color Of Focus Rectangle (Location Focus)

1 Answers1