Question

I have two buttons in a jQM dialog:

<a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a>

jQM adds a bunch of styling to the buttons, such as:

ui-btn-inner ui-btn-corner-all .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all

How do I strip all this sytling away so I can style the buttons myself?

Answer 1

You should override them using css that you define instead of striping them out, because you don’t know what functionality in jquery-ui.js depends on those classes being present.

that being said:

$('a[data-role="button"]').removeClass('ui-btn-inner ui-btn-corner-all ....');

the way to override the styles, is creating your own css file and add a reference to it after the jquery-ui.css, for each class you wanna override, just put your own style.