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

我已经用你小提琴中给出的代码修复了这个问题。 Click this link to see working fiddle.

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

这是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;
}

选择框问题。选项比盒子宽

1 个答案: