I was about to post a question on how to capture the class for an element I can’t get focus on… namely, the Reading Line in the Accessibility widget. Normally this is done by loading the widget in the edit function and then enabling Chrome’s Element Inspector tool via pressing F12 or Ctrl+Shift+C). I prefer the Ctrl+Shift+C method when working on Elfsight widgets as it always opens to the correct tab (Elements); F12 opens to the tab that was last opened.
By accident, I discovered I could get focus on the element in question if I opened the inspector tool on a webpage where the widget was published. Maybe this will help someone with a similar issue.
BTW, the simple CSS I came up with is below… the RGBA value for #003366 with 95% opacity. The obvious choice for my site palette would be a greenish shade, but since this is an accessibility widget, and green is often confused with reds and browns for many forms of color blindness, I opted for this dark hue called “Prussian Blue.”
[class*=“reading-line__Line-sc”] {
background-color: rgba(0, 51, 102, 0.95)
}
