选择框问题.选项比框更宽

Question

我遇到了一个问题，我使用了一种简单而流行的方法来隐藏选择框的原生选择箭头，方法是将选择框包装在不如选择框宽的div中。背景图像通常会放在div中作为替换。此处的示例：http://jsfiddle.net/LUzKL/1/.

<div class="styled">
<select required="" name="" id="">
    <option value=""> Title </option>
    <option value="Mr"> Mr</option>
    <option value="Mr"> Mrs</option>
    <option value="Ms"> Ms </option>
</select>
</div

但是，当您选择框时，选项会比选择框更宽。我不介意，也许世界上大多数人也不在乎。不幸的是，我的客户确实这样做了。除了在JS中重写或使用插件外，还有什么方法可以绕过它吗？它也必须在IE8中工作。

Answer 1

我已经用你提供的代码解决了这个问题。单击此链接可查看工作小提琴。

不幸的是，你的小提琴里没有背景图像，所以我只是添加了我在谷歌图像搜索中找到的第一张。

这是jQuery

$(document).ready(function () {
  $('select:not(.short)')
    .bind('focus mouseover', function () {
        $(this).addClass('expand').removeClass('clicked'); 
     })
    .bind('click', function () { $(this).toggleClass('clicked'); })
    .bind('mouseout', function () { if (!$(this).hasClass('clicked')) { 
      $(this).removeClass('expand'); } 
     })
    .bind('blur', function () { $(this).removeClass('expand clicked'); });
});

以及附加的css

select.expand {
    width: 200px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}