How to style autocomplete/hint dialog boxes?

I have followed CodeMirror Autocompletion Example, now I would like to style the dialog boxes, any hints? I can style the dialog boxes with some prefixed ids from CM, but whats the proper way, or a way in which I can create my own names for the boxes.

Yes, that’s the idea, target classes with a cm- prefix with custom rules, possibly from a theme extension for convenience.

I have a follow-up question - I am targeting specific cm- classes, but would like to style selected completions directly using the cm-completionLabel. Unfortunately the only way I am able to tell if a completion item is selected is the aria-selected="true" selector on the surrounding li element.

Is there a better way to style selected completion elements? Thanks in advance!

No—li[aria-selected] is also what the selector in @codemirror/autocomplete’s base theme looks like.

1 Like