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>
</select>
</div>
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.
+3
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>
</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/
+5
source to share