需要帮助来自www.ryanfait.com的自定义宽度选择框

Question

是否有人使用了link text

中的自定义选择框

我试图找出如何使用相同的图像（不同的宽度）制作不同宽度的多个选择框？

任何人都知道怎么做？

谢谢。

Answer 1

嘿Erik，我一直都在使用这个小脚本，这就是我为了达到这个效果所做的一切，这都是css。

以下是输出示例和照片。你要做的是在你正在使用的选择列表项周围添加一个id或类，这样你就可以只为那个选择列表添加规则。

我从custom select box example下载示例代码并修改了html和css。这个解决方案唯一丢失的是左边的圆角。

图形更改

首先你需要制作一个灵活的图形，我拿了那个例子，然后把select.gif做得更宽。

HTML更改

在包含每个选择列表的p标记中添加了一个ID。您可以将每个选择列表包含在div中我使用p标记，因为它在示例中。

<p id="list_1_id">
  <select name="list1" class="styled">
           <option value="1">Option 1</option>
           <option value="2">Option 2</option>
           <option value="3">Option 3</option>
           <option value="4">Option 4</option>
           <option value="5">Option 5</option>
  </select>
</p>


 <p id="list_2_id">
   <select name="list1" class="styled">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
   </select>
 </p>

CSS更改

对于.select css，您唯一需要更改的是后台规则添加top right，这样背景图片会浮动到右侧。

.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. -this comment is from orginal code we change this below-*/
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) top right no-repeat;
    overflow: hidden;
}

/* add width for each list item*/
#list_1_id .select{
    width: 168px !important;    
  }

#list_2_id .select{
    width: 258px !important;    
  }

RESULT

以下是结果： **注意我没有测试IE 7

Answer 2

此外，

您需要在javascript文件中稍作更改才能完成解决方案。

根据Goose回答：

打开javascript文件| original resource

1）查找

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth_long = "190"; /* default is 190 */

替换为

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth_1 = "200"; /* default is 190 */
var selectWidth_2 = "290";

2）查找

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

替换为

document.write('<style type="text/css">input.styled { display: none; } #list_1_id select.styled { position: relative; width: ' + selectWidth_1 + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } #list_2_id select.styled { position: relative; width: ' + selectWidth_2 + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; cursor: pointer; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');