jQuery 样式化 jQueryUI DatePicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1309194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling the jQueryUI DatePicker
提问by Villager
I am using the jquery datepicker (http://jqueryui.com/demos/datepicker/).
我正在使用 jquery datepicker ( http://jqueryui.com/demos/datepicker/)。
The datepicker on the demo page is small and compact. However, when I use the datepicker on my site, the calendar is HUGE. I would estimate that each date is using 12 pt font.
演示页面上的日期选择器小巧紧凑。然而，当我在我的网站上使用日期选择器时，日历是巨大的。我估计每个日期都使用 12 pt 字体。
How do I get the days to be smaller?
如何让日子变小？
采纳答案by MrHus
The simple answer: You could add a font size in your css to ".ui-datepicker".
简单的答案：您可以在 css 中将字体大小添加到“.ui-datepicker”。
But I think you may have some css rules that are conflicting. You should use the method from Paulo's link to check if this is the case.
但我认为您可能有一些相互冲突的 css 规则。您应该使用 Paulo 链接中的方法来检查是否是这种情况。
回答by Joseph Lee
This is a bit late, but for future reference only: Add this between your , after the jquery ui css reference.
这有点晚了，但仅供将来参考：在 jquery ui css 参考之后，在您的 , 之间添加此内容。
<style type="text/css">
.ui-datepicker { font-size: 9pt !important; }
</style>
and it will become smaller.
它会变得更小。
回答by Clay
The very top line of jquery.ui.theme.csshas the font size:
最上面一行jquery.ui.theme.css的字体大小：
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em;}
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em;}
回答by Lev
None of your CSS rules are conflicting - I can verify this with 100% confidence!
你的 CSS 规则都没有冲突 - 我可以 100% 的信心验证这一点！
The reason for this is because jQuery's demo pages can be VERY misleading. As Seth said, their pages have lots of extra CSS rules added on top of the default library CSS. If you look here:
这样做的原因是因为 jQuery 的演示页面可能非常具有误导性。正如 Seth 所说，他们的页面在默认库 CSS 之上添加了许多额外的 CSS 规则。如果你看这里：
http://jqueryui.com/demos/demos.css
http://jqueryui.com/demos/demos.css
You will see they are making the base font size considerably smaller, which is the real cause.
您会看到它们使基本字体大小显着变小，这才是真正的原因。
I too was getting the same exact issue where I was getting a much larger date picker on my pages than they had on their demo. To confirm it was THEIRCSS which was "conflicting", I used the CSS menu of the Web Developer Toolbar in Firefox to disable the above stated CSS file alone, and then all of the sudden THEIR demo site had large date pickers just the same size as mine.
我也遇到了同样的问题，我的页面上的日期选择器比他们的演示中的日期选择器大得多。为了确认是“冲突”的是他们的CSS，我使用了 Firefox 中 Web Developer Toolbar 的 CSS 菜单来单独禁用上述 CSS 文件，然后突然之间他们的演示站点有大小相同的大日期选择器作为我的。
Thus, the best answer here is incorrect - it is nothing on your end - it is entirely how THEY have decreased the base size. I guarantee you that if you try what I have mentioned here you will find the same thing.
因此，这里的最佳答案是不正确的——这对你来说没什么——这完全是他们减少基本尺寸的方式。我向你保证，如果你尝试我在这里提到的内容，你会发现同样的事情。
回答by eksith
jQuery UI has a theme rollerthat allows you to customize one of the existing themes including the fonts, colors and backgrounds before downloading. You can do other things like set the corner radius, margins and padding.
jQuery UI 有一个主题滚轮，允许您在下载前自定义现有主题之一，包括字体、颜色和背景。您可以执行其他操作，例如设置角半径、边距和填充。
I'd recommend trying to customize it as much as you can beforedownloading so you'll have less to tinker when using it on your site.
我建议您在下载之前尽可能多地自定义它，这样在您的网站上使用它时就可以减少修改。
Remember to set the default font sizes and such for the whole page afteryou've called the jQuery UI stylesheet.
请记住在调用 jQuery UI 样式表后为整个页面设置默认字体大小等。
回答by Half_Duplex
The demo pages have quite a bit of extra CSS to 'fix' what comes in the packaged CSS that they don't mention anywhere. In my opinion, they do a poor job explaining this, especially with how many time the standard css uses !important.
演示页面有相当多的额外 CSS 来“修复”打包 CSS 中的内容，它们在任何地方都没有提到。在我看来，他们在解释这个方面做得很差，尤其是标准 css 使用了多少次！important。
Also, the ThemeRoller uses em as the default, which is % of a font set elsewhere.
此外，ThemeRoller 使用 em 作为默认值，即在别处设置的字体的 %。
Anyway, the dates are links, so to make them smaller, set a size for a around 9px.
无论如何，日期是链接，所以为了让它们更小，设置一个大约 9px 的大小。
Here's what I do before I use any jquery:
这是我在使用任何 jquery 之前所做的：
h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}
回答by seth
Are you including jquery-ui.css in your CSS declarations?
您是否在 CSS 声明中包含 jquery-ui.css？
Also, the example page has a bunch of font-size declarations in its CSS.
此外，示例页面在其 CSS 中有一堆字体大小声明。
回答by redsquare
They have a font-size of 10pt on the body. Remove that in firebug and youll probably see the same font sizes that your seeing on your page.
它们在正文上的字体大小为 10pt。在萤火虫中删除它，您可能会看到与您在页面上看到的相同的字体大小。
