8

I need to change the background color of the selected text using codemirror. Can anyone help?

11

The above answer is missing the essential !important. You need:

.CodeMirror-selected {background-color: #CCCCCC !important;}

If you need to also change the selection foreground color, CodeMirror has the mark-selection.js addon to achieve that.

9

Change the background color for .CodeMirror-selected {} , the class is located in codemirror.css

.CodeMirror-selected {background:#CCCCCC;}
0
4

I was able to solve this by overriding the highlight color specific to the CodeMirror theme:

/** OVERRIDE SELECTED TEXT HIGHLIGHT COLOR FOR THEMES: **/

    /* isotope theme */
    .cm-s-isotope div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* colorforth theme */
    .cm-s-colorforth div.CodeMirror-selected {
        background: #0004FF !important;
    }
    /* 3024-night theme */
    .cm-s-3024-night div.CodeMirror-selected {
        background: #0004FF !important;
    }

/** - - - - - **/

This solution applies to the AngularJS version of CodeMirror.

1

You need to import mark-selection add on and set the custom background-color.

  1. import 'codemirror/addon/selection/mark-selection';
  2. In case you need to reset the background color to default browser behavior then add this to your style background-color: highlight;
-1

I believe this is a CSS concern. Please refer to the following article:

Overriding the Default Text Selection Color with CSS

1
  • 2
    Codemirror uses it's own implementation of selection, hence this method doesn't work. Jun 24, 2014 at 9:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.