Override Font Weight Applied By Jquery-mobile

I am trying to make the font weight normal instead of bold which jquery mobile makes by default.

Solution 1:

If you inspect the rendered page with firebug or similar, you would see that at runtime html structure is quite different from source html, courtesy of jQuery-ui that generates the pretty box:

<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
    <span class="ui-btn-text">Standard: 7 day</span>
    <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
</span>

You want to add a css rule to override it:

#cont .ui-btn-text{font-weight:normal;}​

The id reference is so that it only applies to this particular place; remove it if you want to apply normal font weight everywhere. Fiddle: http://jsfiddle.net/MECXW/9/

Share

You may like these posts

• 
  Need Fixed Header In Ios7+
• 
  Content Should Be Filled From Header To Footerin A Html Page
• 
  Appcache With Phonegap And Jquery Mobile
• 
  Progressive Swipe On Jquery Mobile Panel