javascript - 如何 jquery 禁用特定控件上的主题？

Question

该网页使用 jquery ui 小部件进行日期选择等，以及用于弹出上下文菜单的 se。为此，页面需要引用 jquery css。但是，我们更喜欢使用默认的浏览器样式来提交表单上的按钮。我们可以手动标记它们。另一方面，如果在作为日期选择器小部件一部分的按钮上应用样式，则完全没问题。

我尝试了几种方法，例如 removeClass , className.replace in document.ready() 或 data-role=no 但它没有按预期工作。例如，它从按钮的正常状态移除样式，但不从按钮的悬停或选定状态移除样式。

那么如何在选定的按钮上禁用 jquery-ui 它们呢？

JS Fiddle

Answer 1

在 jQueryUI css ( https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.min.css ) 中更改所有指向您的按钮的选择器以排除带有 :not() 伪选择器的标记，例如:

.ui-state-default:not([type="submit"])

如果您不想修改原始 CSS(例如，它来自 CDN)，请在包含它后加载另一个 CSS(本地)，其规则是从原始 CSS 复制的，但仅针对修改后的按钮，并且在每个参数之后执行 !important 并重置每条规则。解决方案较弱但有效，您最好最终编辑源代码。

it is quite unrealistic to roll back to the browser-default button style

比风格他们

.ui-state-default[type="submit"] { /* rules for excluded buttons */ }

此外，[type="submit"] 是您自己提出的排除标记，excludor 可以是类或其他任何内容，例如:

.ui-state-default:not(.marked) { /* in jQueryUI */ }
.ui-state-default.marked { /* in your styles */ }