jQuery 按钮 - 不寻常的 CSS 样式答案

【问题标题】：jQuery Buttons - Unusual CSS StylingjQuery 按钮 - 不寻常的 CSS 样式
【发布时间】：2016-08-02 20:42:36
【问题描述】：

在我的 PhoneGap 应用程序中，我有以下表单按钮：

<input type="button" value="Proceed" id="proceed">

我的样式表中有以下内容来覆盖原来的 jQuery mobile：

#proceed {
    background-color: red;
    opacity: 1;
    width: 50%;
}

如果我不将不透明度设置为 1，那么背景颜色会被洗掉，并且没有多大用处。但是，当我将其设置为 1 时，红色的“背景”颜色出现在文本上（由 html 中的“值”反映）“继续”，这就是问题所在。

此外，尽管宽度设置为 50%，但按钮似乎保持 100% 的宽度，内部框为 50% 宽度的红色。我不确定这个内部盒子效果是从哪里来的 - 它一定是一个 jQuery 功能，因为它不在我的代码中。

这看起来很不寻常 - 我如何设置整个按钮的样式？或者更简单地说，我怎样才能让按钮的值出现在背景颜色之上？

【问题讨论】：

添加的 css 似乎不会影响提供的按钮 (html) - 请在您的问题中添加 minimal reproducible example
@ochi - 道歉 - 剪断了错误的 html 行。谢谢
嗯，编辑是一种改进，但仍然不是minimal reproducible example - 在问题中，您引用了一个标签（不存在），然后引用了一个内部框（不，不存在任何一个）。帮助我们，帮助你！否则无法回答问题。
听起来这个问题比你提出的要多。正如 ochi 建议的那样，您应该提供足够的代码来重现您的问题，否则任何人都不太可能为您提供帮助。

标签： jquery html css cordova jquery-mobile

【解决方案1】：

这是你的代码：

#proceed {
    background-color: red;
    opacity: 1;
    width: 50%;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<input type="button" value="Proceed" id="proceed">

如果您检查时髦的按钮（右键单击它并选择“检查”或“检查元素”），您会看到 jQuery mobile 将按钮包装在额外的 html 中：

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
  Proceed
  <input type="button" value="Proceed" id="proceed">
</div>

要改变它的颜色，你必须使用data-theme改变它的主题：

<input type="button" value="Proceed" data-theme="a">

默认情况下，jQuery Mobile 内置了几个主题：白色 (data-theme="a")、黑色 (data-theme="b")、etc。红色不是其中之一，所以我想您必须创建一个主题 (using their web site)，然后将主题生成的 CSS 文件添加到您的页面。

【讨论】：