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

【问题标题】：How do I apply jQuery UI styles to normal form elements, like input and select tags?如何将 jQuery UI 样式应用于普通表单元素，例如输入和选择标签？
【发布时间】：2011-12-09 07:52:03
【问题描述】：

也许我遗漏了一些东西，但是在阅读了 jQuery UI 文档之后，我没有看到任何关于将主题样式应用于普通小部件的信息，例如输入和选择标签。在按钮上调用button() 并在将选择日期的输入标签上调用datepicker() 之后，我是否应该将普通文本区域和输入包装在<div class="ui-widget"> 中以提供一致的外观样式，或者给它们一个特定的css 类，或者在文档加载时调用一个函数来设置其他所有样式？

【问题讨论】：

标签： css jquery-ui jquery-ui-theme

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

一些使用 Jquery 的示例。

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

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

【讨论】：