styles reset prevents seeing selected options in plugin dialog multiple select

[JohnRDOrazio]

Bug

I created a plugin for CKEditor 4, with a widget, and a dialog that has a number of form inputs that affect the contents of the widget. Among the form inputs, there are some select controls with the multiple attribute. However, I have noticed that after selecting options from the multiple select, as soon as the select loses focus none of the selected options are showing as selected.

Upon examining closely, I noticed that rules from editor.css are overriding the browser styling on the select control. Specifically:

/* user agent stylesheet */
select:-internal-list-box option:checked {
    background-color: -internal-light-dark(rgb(206, 206, 206), rgb(84, 84, 84));
    color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
}

is being overriden by rules from this block:

/* skins/moono-lisa/editor.css */
.cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    width: auto;
    height: auto;
    vertical-align: baseline;
    box-sizing: content-box;
    position: static;
    transition: none;
    border-collapse: collapse;
    font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
    color: #000;
    text-align: left;
    white-space: nowrap;
    cursor: auto;
    float: none;
}

Upon examining editor.css, I found that the above referenced block is imported from skins/moono-lisa/reset.css:

https://github.com/ckeditor/ckeditor4/blob/ee3949d19b95af2eef96ec561e647b2eb450bd64/skins/moono-lisa/reset.css#L44-L68

Specifically the problematic line is:

https://github.com/ckeditor/ckeditor4/blob/ee3949d19b95af2eef96ec561e647b2eb450bd64/skins/moono-lisa/reset.css#L51

Considering that there is no styling defined for selected options, the rule with background: transparent takes precedence and all options in the select control always have a transparent background whether they are selected or not (when the select control loses focus).

Provide detailed reproduction steps (if any)

• CodePen: https://codepen.io/johnrdorazio/pen/poWXObX

1. Right click in the example ckeditor instance, and select "Open dialog"
2. There will be two multiple selects, the first one will be focused and selected elements will show. The second one is not focused, but selected elements are showing because I have applied a fix to this one (see CSS tab in the example).
3. With some options selected in the first multiple select, click anywhere outside of the select so it will lose focus.

Expected result

The options selected in the first multiple select should show as being selected, just like the options in the second multiple select.

Actual result

The selected options in the first multiple select do not show as being selected when the select has lost focus.

Other details

• Browser: Chrome
• OS: Windows 10
• CKEditor version: 4.17.1
• Installed CKEditor plugins: widget

[JohnRDOrazio]

even though it seems like an easy fix, I however find myself in the situation of not having full control over a specific website's stylesheets, so I cannot implement the fix manually. In any case, seeing that all such styles are being overriden by reset.css, a new rule for select option:checked { background-color: COLOR } should also be defined.

[sculpt0r]

Hi @JohnRDOrazio, Thank you for the report. I can confirm such behavior, but only for Chrome / Edge. Even IE11 works fine in that manner.

[sculpt0r]

Reproducible back to 4.14.0 - so no regression here.

[CKEditorBot]

Closed in https://github.com/ckeditor/ckeditor4/pull/5047