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"
    }
});
2 Likes
7

Hi @dilab

I’m trying to turn off the dotted outline too, but am unsure what to do with the above code. How do I used it with an existing theme? Do I need to create a new view with the resultant ‘myTheme’ as the theme?

It seems you can’t just declare some css to override the focused border as the selector is munged with some weird class name, ie: the selector in Chrome debug tools here is: “.ͼ1.cm-editor.cm-focused” - I’ve never seen the weird looking ‘e’ before.

I can super-easily override it with !important but that is apparently very naughty…works for now though.

Bye,
Mark

8

!important should be fine. Or find some selector that is more specific than the one used in the editor, or use a theme extension that automatically gets the generated classname added.

9

just add this to the existing theme:

"&": {
        fontSize: "12pt",
        border: "1px solid #c0c0c0"
    },
    "&.cm-editor.cm-focused": {
        outline: "none"
    }