在特定组件上覆盖jQuery UI样式 [英] Overriding jQuery UI style on specific components

问题描述

就我喜欢themeRoller而言，我希望能够操纵和替换某些jQuery UI组件(尤其是按钮)的CSS样式.

As much as I like themeRoller I would like to be able to manipulate and replace the css styling of some of my jQuery UI components, especially the buttons.

我已经成功地更改了字体和大小，但无法更改背景图像和填充.我在主题css文件中环顾四周，希望找到可以覆盖的内容，但似乎没有任何效果.

I've been successful at changing the font and size but I'm unable to change the background image and padding. I looked around in the theme css file in the hopes of finding something to overwrite, but nothing seemed to work.

有人可以给我一些有关如何正确实现以下代码的见解吗?:P

Can someone give me some insight on how to get the achieve the code below correctly?:P

.CSS文件

#create-user .ui-button
{
    background-image: none;
}

.xhtml文件

<button id="create-user">Create</button>

推荐答案

请尝试以下操作对其进行强制:

Try the following to force it:

#create-user .ui-button
{
    background-image: none !important;
}

最好手动编辑由themeroller生成的原始CSS文件.

It might also be a better idea to manually edit the original CSS file generated by themeroller.

您也可以在调用.button()之后尝试删除某些类.按钮的外观很大程度上由ui-state-default和ui-corner-all控制.尝试删除那些，看看您的自定义类是否开始工作.它还会动态添加ui-state-hover甚至ui-state-active.

You can also try removing some classes after you called .button(). The button's appearance is largely controlled by ui-state-default and ui-corner-all. Try removing those, see if your custom class starts working. It also adds ui-state-hover and maybe ui-state-active dynamically.

总而言之，不使用jQuery UI按钮可能会更容易，如果只是一些特殊情况，请尝试自己设置样式.

All in all, it's probably easier not to use a jQuery UI button, if it's just a few special cases, try styling it yourself.

这篇关于在特定组件上覆盖jQuery UI样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！