How to change font size and tab width & height of jQuery-UI tabs

Question

I am using jQuery-UI to add tabs on my page, after I added it, I feel the tab font size and tab width and height are too large for my page. I would like to change the font size and tab width and height. How to do it?

Answer 1

您需要在这样的 css 类中更改它

.ui-tabs .ui-tabs-nav li a {font-size:7pt !important;}

Answer 2

Go to the jQuery UI ThemeRoller and create your own theme or modify the presets. On the right hand side under 'Font settings' there is the option to change the font size.

As for the size of the tabs, look at the CSS file that came with the jQuery UI package you downloaded. Find the selector for the jQuery UI tabs and edit the padding property:

.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }

Answer 3

In Firefox 84.0 (Jan 2021) this worked:

.ui-tabs .ui-tabs-nav li a {
  color: blue !important;
}

.ui-tabs .ui-tabs-nav li a {
  font-size: 12px !important;
  font-weight: bold !important;
  color: blue !important;
  // etc.
}

Note that I needed both of those specifications; ie: set color in both li a {} and a {} .