本文介绍了覆盖jquery-mobile应用的字体重量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 < div id(字体大小) =contdata-role =fieldcontain> 
< label for =select-choice-1class =select>选择运送方式:< / label>
< select style =font-weight:normalname =select-choice-1id =select-choice-1>
< option value =standard>标准:7天< / option>
< option value =rush> Rush:3天< / option>
< option value =express> Express:第二天< / option>
< option value =隔夜>隔夜< / option>
< / select>
< / div>

我尝试了内联样式和javaScript

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

但没有成功,它仍然显示为大胆。请建议如何将其取消。



解决方案

如果您使用萤火虫检查呈现的网页或者类似的,你会发现在运行时html结构与源html差别很大,可以用jQuery-ui生成漂亮的盒子:

 < span class =ui-btn-inner ui-btn-corner-allaria-hidden =true> 
< span class =ui-btn-text>标准:7天< / span>
< span class =ui-icon ui-icon-arrow-d ui-icon-shadow>< / span>
< / span>

您想添加一条css规则来覆盖它:

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

id引用使它仅适用于这个特定的地方;如果你想在任何地方应用正常字体重量,请将其删除。小提琴:


I am trying to make the font weight normal instead of bold which jquery mobile makes by 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 with inline style and javaScript

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

But none worked , it still showing bold. Please suggest how to make it unbold.

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

解决方案

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/

这篇关于覆盖jquery-mobile应用的字体重量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 10:39