JQuery Mobile Styling With JavaScript

Question

$(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?

Have you looked if the select has a background-image set? If there is a background-image you can set the background-color how much you want, you will not see it as long as the image is not cleared — Sven Bieder
– Sven Bieder, Commented Jul 19, 2012 at 11:52

micadelli · Accepted Answer · 2012-07-19 14:43:16Z

1

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/

edited Jul 19, 2012 at 14:43

answered Jul 19, 2012 at 11:41

micadelli

2,4926 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lemex Over a year ago

Like this answer alot, but how would i do it for only certain selects rather than them all? Ive tryed $('#' + id).addClass('customSelect') and the customselect class is the same as your code above but with backgroud color, as your code ads it to all selects

micadelli Over a year ago

okey, i updated my answer and jsfiddle, let me know if you'll need any assistance

Lemex Over a year ago

Hey, What a great piece of code, the problem im having now is this: ive loaded the dom, and when i click a button i want to be able to style the select css, now this doesnt work with our code if i add class or add css and ive tried doing the select element trigger create and still nothing, all help would be very much appreciated , thanks

Nikola Radosavljević · Accepted Answer · 2012-07-19 12:19:39Z

0

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.

answered Jul 19, 2012 at 12:19

Nikola Radosavljević

6,91135 silver badges44 bronze badges

1 Comment

Lemex Over a year ago

Tried that, i cant important to JS fiddle as this project is way to big

Lemex · Accepted Answer · 2012-07-26 10:02:19Z

0

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.

answered Jul 26, 2012 at 10:02

Lemex

3,81414 gold badges57 silver badges89 bronze badges

Collectives™ on Stack Overflow

JQuery Mobile Styling With JavaScript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related