覆盖 jquery-mobile 应用的字体粗细答案

【问题标题】：Override font weight applied by jquery-mobile覆盖 jquery-mobile 应用的字体粗细
【发布时间】：2012-03-15 06:58:02
【问题描述】：

我正在尝试使字体粗细正常，而不是 jquery mobile 默认设置的粗体。

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

我尝试了内联样式和 javaScript

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

但没有任何效果，它仍然显示为粗体。请建议如何使其不加粗。

http://jsfiddle.net/neilghosh/MECXW/6/

【问题讨论】：

您的小提琴链接出现 404 错误，请更正
谢谢，我更正了链接

标签： jquery html css jquery-mobile

【解决方案1】：

如果您使用 firebug 或类似工具检查呈现的页面，您会发现在运行时 html 结构与源 html 完全不同，这是由生成漂亮框的 jQuery-ui 提供的：

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

您想添加一个 css 规则来覆盖它：

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

id 引用只适用于这个特定的地方；如果您想在任何地方应用正常的字体粗细，请将其删除。小提琴：http://jsfiddle.net/MECXW/9/

【讨论】：