Block shaped cursor in CodeMirror


CodeMirror does not allow to change shape of the cursor by default. And default cursor shape is a line.

How to make the cursor to look like a box? It can be done using CSS!

First we need to style the cursor itself:

.CodeMirror-cursor {
  width: auto !important;
  border: none !important;
  background: transparent !important;
  background: #BADDFB !important;

width: auto makes the cursor to have width of a single character.

border: none disabled default line shape of the cursor.

background makes our cursor box-shaped, filling it with a color.

But this cursor will overlap the character it is on.

The problem is with cursors container, which is relative by default, but has z-index: 3. So it is much above main code area.

But we can make it lower:

div.CodeMirror-cursors {
  z-index: 0 !important;

Through in this case the cursor will be completely invisible, because it is below code area now. So let's make code area transparent:

.CodeMirror-code {
  background: transparent;