CSS JQueryUI vs. JQM

CSS JQueryUI vs. JQM


I have a page that uses stylesheets from JQueryUI CSS (from 1.10.2 Smoothness), JQuery Mobile (1.3.0), and a local stylesheet in the order shown:

<link rel="stylesheet" href="jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.min.css" />
<link rel="stylesheet" href="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="stylesheets/mobilebudburst.css" />

I have a submit button on the page that is given a data role of button in JQM as shown:

<div style="margin:0 auto;text-align:center">
   <button type="submit" name="btnsubmit" id="btnsubmit" disabled="disabled" value="Submit" tabindex="2" data-role="button" data-inline="true" data-ajax="false" data-type="horizontal">Submit</button>

The button is using the UI CSS and thus displays the font as normal, without a div shadow, and has a hover CSS attached which darkens the element as well as removes a 1px border. 

I'd like to override the UI styling on this button element so it looks like other submit buttons on my site which are using the JQM CSS.  I've added this <style> code in the specific file as shown:

        text-shadow: 0 1px 0 #FFFFFF;

The styling is close but I cannot get the font to be bold nor the button shadow to display.  Also, the border is set to none on hover.

I understand the specificity of styles but don't see a way to override the UI styles since the classes are the same as those in the JQM style schema.

Any help is much appreciated!


Rick R.

PS.  The page requires UI since I'm using the autocomplete function.