CSS style for border of editor

#1

I did not find the style (or color) for the border of the editor.

I would like to change it to visually reflect that the editor has or not the focus.

#2

Something like this should work…

.cm-editor { border: 2px solid orange }
.cm-editor.cm-focused { border: 2px solid blue }
#3

It does not work.

I am using v5.6. I did not find a reference to cm-editor or cm-focused for styling in the code.

#4

Oh, sorry, for 5.x you’ll want .CodeMirror and .CodeMirror-focused.

#5

It does not work either.
I’ll try another method.

#6

If you are using v6, you can do something like:

const myTheme = EditorView.theme({
    "&": {
        fontSize: "12pt",
        border: "1px solid #c0c0c0"
    },
    "&.cm-editor.cm-focused": {
        outline: "none"
    }
});