How to change background of toolbar button when it is “on”, like the redo / undo (tinymce)

Question

I have seen a similar question here .

Based on the answer there I now have this CSS:

/* toolbar */
.mce-toolbar-grp {
    background-color: grey !important; /* uses !important or override .mce-panel background-color/image */
    background-image: none !important;
}

/* text color */
#tinymce {
   color: #dd9900;
}

/* button text color */
.mce-ico {
   /*color: #dd9900;*/
    color: #000 !important;
}

/* button background color */
.mce-btn button {
    background-color: #fff;
}       

/* button background color (hover) */
.mce-btn button:hover {
    background-color: lawngreen;
}   

It all works, but when a button is toggled to on there is no indication of this:

The undo / redo buttons change the background so it is clear. How can i do this for the other buttons?

Example:

https://www.publictalksoftware.co.uk/forums/forum/meeting-schedule-assistant/assignments-editor/

Thanks.

Answer 1

Sorted it. I basically needed the toolbar and button with the same colours so that the rectangle displayed:

/* toolbar */
.mce-toolbar-grp {
    background-color: #fff !important; /* uses !important or override .mce-panel background-color/image */
    background-image: none !important;
}

/* text color */
#tinymce {
   color: #dd9900;
}

/* button text color */
.mce-ico {
    color: #000 !important;
}

/* button background color */
.mce-btn button {
    background-color: #fff;
}           

/* button background color (hover) */
.mce-btn button:hover {
    background-color: darkgray;
}