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

Question

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

Answer 1

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

困难的部分是，根据浏览器的不同，许多表单元素的样式化程度差异很大。特别是，Internet Explorer 使用本机操作系统表单控件，这些控件从操作系统主题设置中获取默认样式，而 Chrome 和 Firefox 等其他浏览器则使用自己的表单控件集，并拥有自己的默认样式集。

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

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