Opera hides text in dropdown when setting background color on select element

When setting the background color of a select element, Opera 1开发者_高级运维1.11 on Windows 7 hides some of the text. This does not happen in other browsers.

Before setting background color:

After setting background color:

The only difference between these two dropdowns is the following CSS:

 background-color: #fff;

The HTML is as follows:

<select size="1">
  <option>Foo</option>
  <option>Bar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
  <option>Foobar foobar foobar foobar</option>
</select>

Here's a page that includes the HTML and the screenshots.

I can't imagine any reason for why Opera should behave like this. Is there something wrong with my HTML and CSS, or is there a workaround for this?

Updates

• This has been reported to show correctly on MacOSx Opera 11.11.
• Reported to Opera as bug DSK-337814.

---

I think there is no general workaround for this issue. When you set background-color, Opera no longer uses OS's way of rendering selects. You aren't probably able to see this on Windows, but there is a huge difference between the two selects on Debian:

Adding background-color for every select element will let your selects behave consistently. This is probably not what you await, but IMHO it's better than if there'd be two different behaviours.

As Jordan has already mentioned, using formalize is also very good solution.

---

I'm not sure if you're able to see this given your theme, but setting any styling on select elements removes all of Opera's default styling for that element. On my screen you can tell, because the styling on the select with the background color looks much different.

It seems like a bug in the default styling of Opera's selects.

2 ways around this include adding padding-right to the select, or possibly using a form consistency library like formalize.