如何将jQuery UI样式应用于普通表单元素，如输入和选择标签？

Question

也许我错过了一些东西，但在阅读了jQuery UI文档后，我没有看到任何关于将主题样式应用于普通小部件的信息，比如输入和选择标签。在按钮上调用button()并在选择日期的输入标签上调用datepicker()后，我应该在<div class="ui-widget">中包装正常的textareas和输入以提供一致的样式，或者给它们某个css类，或者在文档加载上调用一个函数来调整其他所有内容？

Answer 1

jQuery UI主题的工作方式与您将使用的任何其他CSS文档一样。如果你在一个特定的元素上有一组样式，通常你需要做的就是添加定义你想要的样式的类的类。

困难的部分是，根据浏览器的不同，许多表单元素的可设计程度各不相同。特别是，Internet Explorer使用本机操作系统表单控件，从操作系统主题设置获取其默认样式，而其他浏览器（如Chrome和Firefox）使用自己的一组表单控件并具有自己的默认样式集。

在许多情况下，jQuery UI小部件所做的是隐藏默认的表单元素，然后用更可样的元素替换它们，比如<div> s的结构，可以设置样式以模仿实际的表单元素。这些假结构还附加了捕获输入的javascript事件处理程序，并将其代理回实际的表单元素，并在其自身内呈现。

因此，简而言之，将jQuery UI样式应用于表单元素有时可以像应用主题类一样简单，或者有时像模仿实际表单元素一样痛苦。这完全取决于您的目标浏览器和您想要应用的样式。

Answer 2

使用Jquery的一些例子。

$("input:text").addClass("ui-corner-all");

$("#Submit").button();