如何在不使用主题滚轮的情况下使用 jQuery 按钮类自定义按钮？答案

【问题标题】：How do i use the jQuery button class to customize a button without using theme roller?如何在不使用主题滚轮的情况下使用 jQuery 按钮类自定义按钮？
【发布时间】：2013-09-30 04:24:42
【问题描述】：

我是 jQuery Mobile 的新手，我正在尝试弄清楚如何准确地自定义按钮。我必须使用哪些类来访问某些 CSS 属性？

例如，我知道如果你想改变按钮的背景颜色，你可以写.ui-btn-inner {background: white;}。但是当我这样做时，它并不总是有效。

我已经查看了 jQuery Mobile API 网站，但我似乎找不到任何能够真正深入解释这个概念的内容。

如果有人能给我提供一个网站或关于这些课程的解释，将不胜感激。

【问题讨论】：

标签： html css jquery-mobile uibutton customization

【解决方案1】：

您可以检查 html 以查看 jQuery 移动按钮的外观。对于基本按钮，由以下人员创建：

<a href="index.html" data-role="button">Link button</a>

输出如下：

<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Link button</span>
    </span>
</a>

在 jQuery 移动 CSS 之后创建并加载自定义 CSS 文件。在这里您可以覆盖单个 css 类，例如

.ui-btn-inner {
    // !important does the trick
    background-color: #FF0 !important;
    ...
}

您有时可能必须将 !important 添加到 css 以覆盖 jQuery mobiles CSS。但其实我不知道什么时候有必要，如果没有...

您可以在 jQuery 移动 CSS 中查找所有元素的结构，或者，正如我之前提到的，使用网络检查器查看 jQuery 将您的标记变成了什么。

PS
here

提供了对 CSS 工作原理的更深入了解

【讨论】：