change jquery ui combobox font

Question

how to change the font inside jquery ui combobox and the dropdown list my code is:

.ui-autocomplete-input {
                margin: 0;
                padding: 0.3em;
                font-family:"Times New Roman", Times, serif;
            }
            .ui-autocomplete 
            {
                font-family:"Times New Roman", Times, serif;
                max-height: 200px;
                overflow-y: auto;
                /* prevent horizontal scrollbar */
                overflow-x: hidden;
                /* add padding to account for vertical scrollbar */
                z-index:1000;
            }

but nothing change I don't know where is the error

score 2 · Accepted Answer · answered Jul 27 '12 at 14:54

2

Try this:

 .ui-menu .ui-menu-item {
     font-family:"Times New Roman", Times, serif;
 }

answered Jul 27 '12 at 14:54

SomeoneS

1,207
2
19
34

it worked but the same error from is thread http://stackoverflow.com/questions/11689144/arabic-characters-are-displayed-separately-in-google-chrome if you can help me as you know much about jquery ui will be grate – Ahmed Kato Jul 27 '12 at 15:40
Try: .ui-widget {font-family:"Times New Roman", Times, serif;} – SomeoneS Jul 27 '12 at 15:44
unfortunately it didn't work :S thank you for your help and your try :D – Ahmed Kato Jul 28 '12 at 11:55

score 1 · Answer 2 · answered Jul 27 '12 at 14:52

1

It would have been overridden by some other CSS. You can theme your jQuery UI using this.

answered Jul 27 '12 at 14:52

Prasanna

10,956
2
28
40

score 1 · Answer 3 · answered Jul 27 '12 at 14:54

If you want to change your jQuery UI look, you should use the tool supplied by the developers - themeroller. Even if you find a way to set the font as you'd like, chances are you aren't fully aware of the theme settings and how they evaluate, meaning sometimes you might get the correct behaviour, other times you won't.

That being said, if you add !important to the end of a CSS setting it overrides other styles:

font-family:"Times New Roman", Times, serif !important;

But you should probably not do this.

change jquery ui combobox font

3 Answers3