jquery自定义选择框 - 宽度和高度问题

时间:2013-03-07 12:55:16

标签: jquery jquery-selectbox

我正在使用此站点的脚本jQuery自定义选择框(当前版本:0.6.1):

http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/

我的问题是,类“jquery-selectbox-list jquery-custom-selectboxes-replacement-list”的宽度和高度是由内联样式赋值设置的。

我的原始代码如下:

<span class="anrede">
Anrede<br />
<select name="anrede" id="anrede" value="[[!+fi.anrede]]" >
<option value="select"></option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</span>

如果我在Firebug中查看该网站的源代码,代码会发生如下变化:

<span class="anrede">
Anrede
<br>
<div class="jquery-selectbox jquery-custom-selectboxes-replaced" style="width: 125px;">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 120px; height: 3em; display: none;">
<span class="jquery-selectbox-item value-select item-0"></span>
<span class="jquery-selectbox-item value-Frau item-1">Frau</span>
<span class="jquery-selectbox-item value-Herr item-2">Herr</span>
</div>
<span class="jquery-selectbox-currentItem"></span>
<select id="anrede" value="" name="anrede" style="display: none;">
<option value="select"></option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
</span>

我的问题是第三个div级:

<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 120px; height: 3em; display: none;">

正如您在这里看到的那样是内联样式分配,这会导致我的布局问题。有谁知道如何解决这个问题?

提前干杯!

1 个答案:

答案 0 :(得分:1)

只需添加!重要的css规则,如下:

.jquery-selectbox-list.jquery-custom-selectboxes-replaced-list {
    width: yourvaluepx !important;
    height: yourvaluepx !important;
}