Question

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

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

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

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

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

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

这看起来很不寻常 - 我如何整体按下按钮？或者更简单地说，如何让按钮的值显示在背景颜色的顶部？

Answer 1

这是您的代码：

＆＃13;

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

＆＃13;

<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">

＆＃13;

如果您检查时髦按钮（右键单击它并选择＆＃34; Inspect＆＃34;或＆＃34; Inspect element＆＃34;），您将看到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。 Red不是其中之一，所以我猜你必须创建一个主题（using their web site），然后将主题生成的CSS文件添加到你的页面。

jQuery按钮 - 不寻常的CSS样式

1 个答案: