Text selection issue

I styled .cm-selectionBackground with a background:red; border-bottom:3px solid black;


However, the result above (what I want) appears only to focus out. When the editor is focused, only the style below apply:


The slight blue background seams to be my browser’s default selection background, that I tried to change (remove) with ::selection {background:none;} ::-moz-selection {background:none;} without success.

Any idea how to make my selected text with a red background ?

If styling cm-selectionBackground does anything, you have the drawSelection extension enabled, and the native selection isn’t visible. There’s a separate rule for a focused editor (.cm-focused) that is more specific than your rule in the styles injected by @codemirror/view.

1 Like

Thank you, that solves my issue!

.cm-editor.cm-focused .cm-selectionBackground,
.cm-editor .cm-selectionBackground{background:red;}