升级后在jQuery Mobile中输入文本背景问题

时间:2013-04-10 04:36:24

标签: jquery css html5 jquery-mobile

首先,以下是我使用的风格

.iblack input,.iblack textarea
{
  box-shadow: 0px 1px 4px 4px rgb(0, 0, 0) inset !important;
}

早些时候我使用的是jQuery Mobile 1.2和jQuery 1.8,但事情还不错。在这里查看实时小提琴http://jsfiddle.net/qPKLZ/

今天我升级到jQuery Mobile 1.3和jQuery 1.9,发现没有正确应用背景样式。现场小提琴在这里http://jsfiddle.net/ECxve/

有人能指出我到底出了什么问题吗?

我甚至在文本输入本身上尝试background-color来发现观察到的相同行为。

1 个答案:

答案 0 :(得分:2)

第一个小提琴标记应用输入元素上的圆角

<div class="iblack">
    <input id="hoursMon" name="hoursMon" type="number" value="" data-mini="true" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-mini">
</div>

但是你的第二个小提琴中有一个额外的div包装器来处理圆角

<div class="iblack">
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini">
        <input id="hoursMon" name="hoursMon" type="number" value="" data-mini="true" class="ui-input-text ui-body-c"></div>
</div>

通过设置div而不是输入来修复它......类似于

.iblack .ui-corner-all
{
  box-shadow: 0px 1px 4px 4px rgb(0, 0, 0) inset !important;
}

jsfiddle