I'm using Jquery Mobile project.

There are buttons ans links in the app, and I want the blue background on alls buttons!

There are two kinds of buttons : buttons with links

<a id="cancel" href="http://path" data-role="button" data-icon="cancel" data-inline="true">CANCEL</a>

Those kinds of button works fine (blue when clicked)

And those buttons :

<input type="submit" value="Add" data-role="button" data-icon="ok" data-inline="true" />

And those submit doesn't work. They are in POST Form.

I want to make the button blue when I click on them. Actually, There is a shade around but no blue button :

(just the shade... The button must be all blue ^^ )

How to make this button be blue ?!?

Thanks to help me !

EDIT :

I tried class="ui-btn-active" on the input too, but the button is still grey

I'm using Jquery Mobile project.

There are buttons ans links in the app, and I want the blue background on alls buttons!

There are two kinds of buttons : buttons with links

<a id="cancel" href="http://path" data-role="button" data-icon="cancel" data-inline="true">CANCEL</a>

Those kinds of button works fine (blue when clicked)

And those buttons :

<input type="submit" value="Add" data-role="button" data-icon="ok" data-inline="true" />

And those submit doesn't work. They are in POST Form.

I want to make the button blue when I click on them. Actually, There is a shade around but no blue button :

(just the shade... The button must be all blue ^^ )

How to make this button be blue ?!?

Thanks to help me !

EDIT :

I tried class="ui-btn-active" on the input too, but the button is still grey

• javascript
• jquery
• css
• jquery-ui
• jquery-mobile

• Perhaps adding a href="javascript:void(0)" might help? Alternatively can you perhaps post a jsfiddle for us? – Rob Schmuecker Commented Oct 28, 2013 at 16:25
• what do you want exactly? blue shadow around buttons or blue button on click? – Omar Commented Oct 28, 2013 at 16:46
• @Omar : Blue button ! the blue shadow is the curent effect but I just want blue button when pressed (and the blue button still untill the new page) – clement Commented Oct 28, 2013 at 16:48
• like this? jsfiddle/Palestinian/dhSfd – Omar Commented Oct 28, 2013 at 16:50
• input is different than a jsfiddle/Palestinian/yp9yw – Omar Commented Oct 28, 2013 at 16:54

2 Answers 2

input with type submit is wrapped in a div, so you need ui-btn-active to parent div of submit button.

$(this).closest('div').addClass("ui-btn-active");

For anchors with data-role="button"

$(this).addClass("ui-btn-active");

Demo

If you want to use CSS,

Then use background-color for them.

a:active, input[type="submit"]:active {
  background-color: blue;
}

I have created a fiddle for you, http://jsfiddle/afzaal_ahmad_zeeshan/kMm3W/. The issue there is the JS version (jQuery Mobile) its the code from them, you're not making any mistake. You can see jQuery Mobile checked at the left side. If you uncheck it, you will see the background. So, you will need to change that.

This problem arises in jQuery Mobile 1.3.xx not in 1.2. So this is an edition in the code, to make the UI similar cross browser.