Jquery手机 - 集合文本框背景 [英] Jquery Mobile - set textbox background

问题描述

我尝试设置背景颜色 JQuery Mobile textbox字段，但是背景不覆盖整个文本框。正如你在下面的图片中可以看到的，在控件的左边和右边有一些不继承背景颜色的部分。

问题

问题是 JQuery Mobile 正在动态添加一些 div 包装器，并且文本框呈现为

 < div class =ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c> 
< input type =textname =nameclass =inputreq ui-input-text ui-body-cid =namevalue => 
< / div> 
  

如果我将背景颜色设置为 div wrapper它将覆盖整个文本框，但我怎么能这样用纯 CSS ？

这里有一个工作的 jsfiddle 。是否有勇敢的JQM战士可以帮助我？

解决方案

使用

< pre class =lang-css prettyprint-override> .ui-shadow-inset，ui-corner-all，ui-btn-shadow，ui-body-c
{
background-color：＃D5EEFF！important;
}


如果覆盖某些其他组件，请删除此CSS。 >

UPDATE

  $（。inputreq）。parent（）。css（background-color，＃D5EEFF）; 
  

jQuery解决方法

I'm trying to set background color the JQuery Mobile textbox field, however the background is not covering the whole textbox. As you can see in the image below on the left and the right ends of the control there are parts that are not inheriting the background color.

The problem

The problem is that JQuery Mobile is adding dynamically some div wrappers and the textbox is rendered like that

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="text" name="name" class="inputreq ui-input-text ui-body-c" id="name" value="">
</div>

If I set the background color to the div wrapper it will cover the whole textbox, but how can I do this with pure CSS? Is there a way to set the style of an element's parent?

Here is a working jsfiddle with the example above. Is there a brave JQM warrior that could help me?

解决方案

Use

.ui-shadow-inset, ui-corner-all, ui-btn-shadow, ui-body-c
{
   background-color: #D5EEFF !important;
}

If this override some other component, remove the award this CSS.

UPDATE

$(".inputreq").parent().css("background-color", "#D5EEFF");

jQuery workaround

这篇关于Jquery手机 - 集合文本框背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！