如何更改jQuery-UI选项卡的字体大小、标签宽度和高度

Question

我正在使用 jQuery-UI 在我的页面上添加选项卡，但是添加后，我感觉选项卡的字体大小、宽度和高度对我的页面来说太大了。我想改变字体大小、选项卡宽度和高度。如何做到呢？

- Leem.fin

---

那个手册页面上说：“jQuery UI Tabs插件使用jQuery UI CSS框架来设置其外观和感觉，包括颜色和背景纹理。我们建议使用ThemeRoller工具创建和下载易于构建和维护的自定义主题。”我会研究一下这个。 - Nanne

请看这里 http://keith-wood.name/uiTabs.html - NoWar

这些答案中有任何一个对您有用吗？如果是，请接受它作为答案。 - Tass

Answer 1

你需要在一个CSS类中进行更改，如下所示：

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

- Alon Eitan

---

但是，如果您的页面中有2个或更多选项卡小部件，则会影响所有这些小部件。 - Sathesh

Answer 2

请前往jQuery UI ThemeRoller创建自己的主题或修改预设主题。在“字体设置”下方，可以选择更改字体大小。

关于选项卡的大小，请查看您下载的jQuery UI软件包中附带的CSS文件。找到jQuery UI选项卡的选择器并编辑填充属性。

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

- Yi Jiang

Answer 3

在 Firefox 84.0（2021年1月）中，这个可以工作：

.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.
}

请注意，我需要这两个规范：即在li a {}和a {}中都设置color。

- Victoria Stuart