Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 740
Marko Jovanović Avatar asked Apr 04 '12 12:04

Marko Jovanović


1 Answers

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

like image 178
Capagris Avatar answered Sep 28 '22 05:09

Capagris