remove font-family from telerik radcombobox from jquery

I am creating a web app in c# with js in which I am using telerik component,

the problem is the custom class for my telerik dropdown is

.RadComboBox_Bootstrap {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

now I want to remove this class I did something like the following

$('.RadComboBox_Bootstrap').css({'font-family':''})

And

$('.RadComboBox_Bootstrap').css({'font-family':'Arial !important'})

but nothing worked for me,

I tried the following

$('.RadComboBox_Bootstrap').eq(13).css({'font-size':'8px'})

and the font-size of radcombobox changed but when I try to change font-family, I am not able to succeed, what may be the issue here?

Solution

I've got a question: you said you want to remove the class, but then you try to override the css rule...what do you want to archieve?

In case you want to remove the class you should use the removeClass method. See documentation here;

If you want to override the css rule: is it possible your

$('.RadComboBox_Bootstrap').css({'font-family':''})

is executed before the .RadComboBox_Bootstrap element is rendered/elaborated? (is the $('.RadComboBox_Bootstrap').css({'font-family':''}) in document.ready (or $(function(){...}))) function?). If the instruction is executed before the dom is loaded, the jQuery selector finds no elements and do not apply the css rule. In this example the rule will NOT be applied

<html>
    <head>
        <!-- import jquery here -->
        <script>
           $('.RadComboBox_Bootstrap').css({'font-family':''})
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

In this example, it will

<html>
    <head>
        <!-- import jquery here -->
        <script>
            $(function(){
                $('.RadComboBox_Bootstrap').css({'font-family':''});
            });
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

Anyway you can always write your own css rule to override the one you reported:

.my-wrapper .RadComboBox_Bootstrap {
    font-family: Arial,sans-serif;
}

(you have to add my-wrapper class to a parent). This way you custom rule is "more specific" for the dom element and will be applied. See this for specificity details