CODEWITHSUNDEEP
cssjquery-mobilebackgroundtextbox
Anton Belev
Anton Belev

Reputation: 13623

Jquery Mobile - set textbox background

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.

enter link description here

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?

Upvotes: 1

Views: 2958

Answers (1)

PiLHA
PiLHA

Reputation: 2374

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

Upvotes: 1

Related Questions