CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Lemex
Lemex

Reputation: 3794

JQuery Mobile Styling With JavaScript

$(this).css("background-color", "red");

For normal input I style the background RED within my for each input loop which works fine.

But when its a select it doesnt seem to work. The jquery mobile select image still stays the same!

Im using JQuery + JQuery Mobile.

How do i force it to change? Even if its just adding a border?

Upvotes: 1

Views: 940

Answers (3)

Lemex
Lemex

Reputation: 3794

My solution for this was

$(element).parent().addClass("inputRequired");

Getting the parent of the element(which is the select tag) and adding the required class to the DIV instead.

Upvotes: 0

micadelli
micadelli

Reputation: 2482

You could easily override the styles for every select menus in CSS:

div.ui-select span.ui-btn-inner {
    border: 1px solid red;
    color: red;
    text-align: right;    
}

.. or if you want to stick to jQuery:

​$('.ui-select span.ui-btn-inner').css('background-color', 'blue');​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.. to customize a specific select menu, give your select element an id and then to select it with jQuery you'll need to append -button to the id. That's due to the fact that jQuery Mobile creates multiple elements that you might not know of. So, if you'll give your select menu an id custom-id and you want to change its background color, your jQuery should look like this:

$('.ui-select #custom-id-button span.ui-btn-inner').css('background-color', 'green');

.. and same in CSS:

div.ui-select #custom-id-button span.ui-btn-inner {
    text-align: left;    
}

Updated JSFiddle
http://jsfiddle.net/5Bkx9/6/

Upvotes: 1

Nikola Radosavljević
Nikola Radosavljević

Reputation: 6911

Check what this is in your execution context. Remember that this can be different things for same exact method, depending on target of invocation. It's better to select it explicitly using a selector.

If this is not the problem, check if you have this field styled with !important directive added after background color.

To get better analysis of your problem you'll have to give us more information, best replicated in jsfiddle.

Upvotes: 0

Related Questions