Text In "Standards" Select Box In Auditor Bookmarklet Not Visible When Used On Sites With Bootstrap #128
Description
When I tried to use to auditor bookmarklet on a site that uses Bootstrap, I found that the text in the "Standards" select box was invisible. I did some digging and found that it was because Bootstrap's default CSS stylesheet includes a CSS rule that explicitly sets the "color" attribute of all "select" elements to "inherit". The "Standards" select element in the bookmarklet is enclosed in a "div" element with the id "HTMLCS-settings-use-standard". That div element has its color attribute set to "#FFFFFF" (white) by the HTMLCS.css stylesheet that the bookmarklet uses (it is set in the CSS rule specified by the following selector: "#HTMLCS-wrapper #HTMLCS-settings-use-standard"). Since Bootstrap explicitly sets the color attribute of select elements to "inherit", that means that the color of the text inside the "Standard" select dropdown box inherits the color "#FFFFFF" (white) from the parent div. Since the background color of the box is also white, the text is invisible.
To fix this problem, it is simply a matter of adding an explicit rule in the HTMLCS.css file that sets the color attribute of select elements inside of the div element with the id of "HTMLCS-settings-use-standard" to "black".
While you're at it, I'd also recommend explicitly setting the background-color attribute within that same selector to "white". While I didn't notice any problem with the background color on the site I tested, the same kind of thing could happen in theory unless it is explicitly set.