Question

我在网页上有一个带有其他基于jQueryUI的元素的日期选择器。 datepicker需要与其他对象具有单独的样式。我的理解是使用themeroller创建一个特定于datepicker的样式，并使用适当的选择器，在我的例子中它是“.dateTextBox”。

以下是所述类的元素：

<input type="input" class="dateTextBox">

以下是自定义CSS的片段：

.dateTextBox .ui-widget-content { border: 1px solid #aaaaaa; background: #ff0000 }

我遇到的问题是虽然我的文本框中添加了“.dateTextBox”类，但jquery创建的datepicker元素只有自己的jQueryUi类;我的自定义选择器没有添加到它，因此themeroller导出的伴随自定义css没有被使用，因为它们引用了代码中不存在的选择器。

我尝试在文本框的onclick中添加代码，该代码将使用dateTextBox类在datepicker容器中添加任何元素，但这只会导致某些元素由自定义css设置样式（请参阅jsfiddle，其中datepicker标头是在我的CSS中设置的蓝色，但背景不是红色，因为在我的CSS中使用“.ui-widget-content”类设置（jsfiddle似乎应用了它的默认jquerycss，有人知道如何在jsfiddles中禁用它吗？）< / p>

Please see this jsfiddle

是否像themeroller中的错误选择器一样简单，或者我是否在正确的轨道上将手动添加选择器类添加到生成的datepicker中？

编辑： - 感谢大家的帮助。我想澄清一下，我遇到的问题是使用JQuery的themeroller将自定义主题应用于他们自己的控件之一。我可以手动从头开始专门为我的datepicker创建一个完整的css页面，但我可能会在另一个JQuery控件的情况下解决这个问题。

- 另外值得注意的是，jsfiddle为jquery提供了一个默认的css，因为日历显示它并不意味着它采用我在CSS窗口中提供的样式

编辑2： - 这是我所指的themeroller网站，似乎人们认为我只是遇到了css本身的问题。单击下载主题，您将看到范围选择器文本框，该文本框应允许在一个页面中允许多个不同样式的jquery控件

themeroller

Answer 1

CSS选择器的工作方式是归因于点。你越具体，你拥有的点越多，风格就越有分数。

要应用您想要的样式，您有2个解决方案。在你的css规则中更具体。添加ID将使您的选择更强。：

<input type="input" id="test" class="dateTextBox">
#test.dateTextBox .ui-widget-content { border: 1px solid #aaaaaa; background: #ff0000 }

请注意，ID不必直接在控件中，它可以在父控件中。

第二种解决方案是使用内联样式。由jquery或手动添加。

<input type="input" class="dateTextBox" style="border: 1px solid #aaaaaa; background: #ff0000">
$(".dateTextBox").attr("style", "border: 1px solid #aaaaaa; background: #ff0000");

希望得到这个帮助。

更新：

正如我所说，您可以将所有datePicker放入具有特定ID的容器中。 div可以用表格替换。

<div id="container" >
    <input type="input" id="test" class="dateTextBox">
    //any other control you like
</div>

和CSS

#container .dateTextBox .ui-widget-content { border: 1px solid #aaaaaa; background: #ff0000 }

JqueryUI datepicker的自定义样式

1 个答案: