2

I want to change the cursor color & width and if possible change it to "__" this type of cursor.

Can we do it through CSS or jQuery

CSS 

xyz {cursor-color:red;}

I know it's probably the most idiotic code.

Kindle Q
  • 944
  • 2
  • 19
  • 28
Nigam Chavda
  • 57
  • 1
  • 7
  • 1
    possible duplicate of [assign color to mouse cursor using CSS](http://stackoverflow.com/questions/18779354/assign-color-to-mouse-cursor-using-css) – buhbang Jun 18 '14 at 18:19
  • Do you mean the cursor (the symbol indicating the current point of insertion in an editable area) or the pointer (the symbol that can be moved around by moving the mouse)? I think you mean the former (“text-box cursor” suggests that). CSS confusingly uses the property `cursor` for setting the pointer and has nothing for setting the cursor, except in the sense that setting text color changes cursor color, too. – Jukka K. Korpela Jun 18 '14 at 19:05
  • i meant the symbol indicating the current point of insertion in an editable area @JukkaK.Korpela – Nigam Chavda Jun 18 '14 at 19:25
  • Then see http://stackoverflow.com/questions/684972/how-do-i-change-the-color-of-the-text-cursor-in-an-input-field-in-ie/685019#685019 where the question implicitly answers this for most browsers (the cursor has the same color as the text) and the accepted answer tells that in IE the color is the inverse of the background color. That seems to be all you can do. – Jukka K. Korpela Jun 18 '14 at 19:40

2 Answers2

0

You can change the colour of the text cursor using the 'caret-color' CSS property. See here for details.

For example:

.text-box
{
     caret-color: red;
}
FifthBeatle
  • 1
  • 2
-1

The only way to change the cursor on a webpage is to use CSS (which can be edited through jQuery):

.special-cursor {
     cursor: vertical-text;
}

The above will convert the cursor to a vertical-text cursor, closest thing I could find to an underscore. See this link for all the possibilities.

The only way to change the color of the cursor is by uploading your own image and linking to it in CSS

.colored-cursor {
     cursor: url(hyper.cur), auto;
}

Here, "auto" is the default/backup in case url() is not supported.

apparatix
  • 1,492
  • 7
  • 22
  • 37