Question

using jquery-1.6.1.min.js and jquery-ui-1.8.13.min.js.

I have a textbox sitting inside a jquery dialog

<div class="chat-response">
    <input class="chat-response-textbox" name="chat-response-textbox" placeholder="Type message here">
</div>

I have some associated css which I have made the font size intentionally large:

.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}

However when running in Chrome/IE the font size doesn’t come out as 20.

In Chrome I can see the style is being taken from jquery.ui.theme.css

Elements Window

Styles Window

Why is this occurring given I explicitly assign a class to the input element?

Answer 1

It’s all about the selector specificity. The most-specific selector wins; in this case that’s .ui-widget input.

Just make your selector more specific than that one, and it’ll work:

.ui-widget input.chat-response-textbox
{
    font-size: 20px;
    font-family: Arial;
}