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

9
votes

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.

enter image description here

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

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

4
htmlcssoperafont-facewebfonts
I'ts hard to see the problem, the fiddle is just an input box. Need to see the rest of the page & css. - frontsideup
@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. - Marko Jovanović
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; ? - Luke
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. - frontendzzzguy
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...? - Hein

4 Answers

1
votes

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

1
votes

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.

1
votes

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.

1
votes

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;
}