Override font weight used by jquery-mobile

I'm trying to make the font of the font normal and not bold, which makes jquery mobile the default.

<div id="cont" data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select style="font-weight: normal" name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>


I tried both inline style and javaScript

$('#select-choice-1').css("font-weight", "normal");


But nobody worked, he still holds on. Please suggest how to do this by autopsy.



source to share

1 answer

If you inspect the rendered page with firebug or similar, you can see that at runtime the html structure is very different from the original html, courtesy of jQuery-ui, which generates a nice border:

<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>


You want to add a css rule to override it:

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


The identifier reference is such that it only applies to that location; remove it if you want to use a normal font everywhere. Fiddle: http://jsfiddle.net/MECXW/9/



All Articles