Font-face, messes up autocomplete drop down list in Opera browser

Question

As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.

input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
    font-size: 1.2em;
    font-family:  sans-serif;
    color: #2A873A;
    padding-left: 25px;
}

Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.

Here is the screenshot of "bug" in action.

P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.

EDIT: http://jsfiddle.net/burCR/

Catastrophism

I'ts hard to see the problem, the fiddle is just an input box. Need to see the rest of the page & css. – Exportation

@Julien Etienne I don't understand what you mean? Problem is visible even on that one input element (on jsfiddle example). At least on Win7 64x, v11.62 and 12 alpha. Anyway I reported the bug to the Opera team. – Appetitive

I know this happens in some other browsers such as coda, but it's only for certain input forms. Can you highlight the text? Maybe background- color:white; ? – Abash

Hi Marko, I have checked this jsfiddle in Opera v.11.62 on Mac 10.7.3 and can see no problem with it. Do you have a live version I could have a look at as I am quite intrigued. – Cupric

@trickeedickee unfortunately jsfiddle is the only live version I have. But The problem is visible even there. Here is the list of browser versions and OSs that was tested on: Opera 11.62 on Vista, 11.62 on Win7, 11.62 on Ubuntu 11.10, Opera 12 Alpha on Vista, and Opera 12 Beta on Vista. – Appetitive

Here is live example of a bug at codeschool.com/users/sign_in ... Stumble upon it by chance :) – Appetitive

There IS a problem with the fiddle, I'm just running into the same Opera problem with my own site. Are there any solutions to this so far...? – Harm

@Harm Sorry, but I haven't found a solution to the problem. I did file a bug report to the opera team (that was about 5 months ago), and the bug is still present. – Appetitive

Bug still present in Opera 12.15 – Reticulate

Answer 1

Have you tried specifying the font directly in your css? for example:

div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}

Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.

For extra help, please mention the name of the custom font, your full css and a live link to your site

Gazzo

Answer 2

Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.

http://www.w3schools.com/cssref/css_websafe_fonts.asp

And if that doesn't work try taking the font you want from microsoft word and use @fontface to insert you custom font instead of using a websafe one.

And finally try using your font-family on the form and have the input inherit the font. Hopefully this helped.

Furmenty

Answer 3

Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.

Grim

Answer 4

You can specify colors for both the background and the text individually.

input   {
    background-color: white;
    color: black;
    font-family: "My Fontface Font", Verdana, ms serif;
}

Krupp