Jquery ui-widget css override

Question

I am using jquery autocomplete and would like to override some of the css styles used in it but I am not able to do so. The input font size is 1 em and the font:weight is bold which I don't want. so how do I change the font size and font weight.

here are the css classes that I want to change. I put all font sizes to 0.5 em but it is not chaniging anything.

            /* Component containers
            ----------------------------------*/
            .ui-widget {
                font-family: Verdana,Arial,sans-serif;
                font-size: 0.5em;
            }
            .ui-widget .ui-widget {
                font-size: 0.5em;
            }
            .ui-widget input,
            .ui-widget select,
            .ui-widget textarea,
            .ui-widget button {
                font-family: Verdana,Arial,sans-serif;
                font-size: 0.5 !important;
            }
            .ui-widget-content {
                border: 1px solid #aaaaaa;
                background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
                color: #222222;
            }
            .ui-widget-content a {
                color: #222222;
            }
            .ui-widget-header {
                border: 1px solid #aaaaaa;
                background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
                color: #222222;
                font-weight: bold;
            }
            .ui-widget-header a {
                color: #222222;
            }

Alexander Farber · Accepted Answer · 2018-05-14 07:57:19Z

9

First try avoiding using !important in your code as it is a bad practice.

Next you are missing the em suffix after the units

font-size: 0.5 !important;
              ^-------------Missing em

should be

font-size: 0.5em !important;
                     ^------- get rid of this

You always have the option of overriding the styles if you can calculate the specificity properly.

edited May 14, 2018 at 7:57

Alexander Farber

23.4k79 gold badges263 silver badges449 bronze badges

answered Jul 27, 2013 at 20:40

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

edsobo Over a year ago

Thanks for that link to the article about specificity. It was very helpful.

codedme · Accepted Answer · 2013-07-27 20:37:42Z

1

Try this:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 0.5em !important;
    font-weight:normal !important;
}

If it didn't work please make a fiddle.

answered Jul 27, 2013 at 20:37

codedme

6253 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery ui-widget css override

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related