jQuery 按钮 - 不寻常的 CSS 样式

Question

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

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

我的样式表中包含以下内容以覆盖原始 jQuery 移动设备：

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

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

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

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

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

如果您检查时髦的按钮（右键单击它并 select "Inspect" 或 "Inspect element"），您会看到 jQuery 移动设备将按钮包裹在额外的 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 isn't one of them, so I guess you have to create a theme (using their web site) 然后添加主题的生成 CSS 个文件到您的页面。

jQuery 按钮 - 不寻常的 CSS 样式

jQuery Buttons - Unusual CSS Styling

html

css

jquery

jquery-mobile

cordova