Open Bug 644655 Opened 12 years ago Updated 5 months ago

Select control with custom "focus" background color renders incorrectly on Mac OS X when control receives focus

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Version:
4.0 Branch
Platform:
x86_64
macOS
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: denisahearn, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

If a select control has a CSS rule that specifies a custom background color for the "focus" selector, then Firefox 4 has some rendering issues on Mac OS 10.6:
 
1. When you click on the select control, or move focus to this control, the button on the right side of the control (which drops down the menu) is lost (not rendered).

2. When you drop down the select control's menu, and then hover your mouse cursor over each option, the background color of each option changes to the custom color after the mouse cursor exits the option. The background color of any option groups in the control remain white however.

Reproducible: Always

Steps to Reproduce:
Run the sample HTML that is pasted in the "Additional Information" field below, and then follow the steps provided in the "Details" field above.
Actual Results:  
The actual results are described in the "Details" field above.

Expected Results:  
The select control should render the same as when a custom background color is not specified via the "focus" CSS selector.  

The background color of options in the select control's  menu should not change color.  They should have the custom background color (this is the behavior in earlier versions of Firefox).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Firefox 4 Select Bug</title>
		
		<style>
            select#select2:focus
            {
            	background-color: #ffe6cc;
            }
		</style>
	</head>
	<body>
	    <h1>Select Control Issues in Firefox 4</h1>
	    
	    <form>
	        <p>This is a select with the standard background color.  Works fine.</p>
    		<select id='select1'>
    			<optgroup label="Group One">
    			<option selected="selected" value="1">One</option>
    			<option value="2">Two</option>
    			<option value="3">Three</option>
    			<optgroup label="Group Two">
    			<option value="4">One</option>
    			<option value="5">Two</option>
    			<option value="6">Three</option>
    		</select>
    		
    		<br/>
    		<br/>

	        <p>This is a select with a custom background color.</p>

    		<select id='select2'>
    			<optgroup label="Group One">
    			<option selected="selected" value="1">One</option>
    			<option value="2">Two</option>
    			<option value="3">Three</option>
    			<optgroup label="Group Two">
    			<option value="4">One</option>
    			<option value="5">Two</option>
    			<option value="6">Three</option>
    		</select>

	        <p>Has the following issues:</p>
	        <ol>
	            <li>When you click on it or move focus to this control, it is rendered strange.  The button on the right side of the control (which drops down the menu) is lost.</li>
	            <li>When you drop down the menu, and then hover your mouse cursor over each option, the background color of the option changes to the custom color.  The background color of the option groups remain white.</li>
	        </ol>
    	</form>
	</body>
</html>
Version: unspecified → 4.0 Branch
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.