javascript - 如何仅在选择控件上显示箭头

Question

是否只为 html 选择控件显示箭头我找到了下面的示例，但它不适用于 IE...

<select style="width:18px">
<option value="10000">Something</option>
<option value="100">Other thing</option>
<option value="1">The last option</option>
</select>

http://jsfiddle.net/Fs7G5/

Answer 1

您可以检测用户是否使用 Internet Explorer，然后相应地更改 select 元素的宽度。如果您想最小化显示在下拉列表左侧的空白区域，您还可以将元素的 margin-left 设置为负值。

function msieversion() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    return msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./) ? true : false;
}

if(msieversion()){
    // I added a #myselect ID to the element, but if you don't want to,
    // you can still get to the element using another JS selector
    var element = document.getElementById('myselect');
    element.style.width = '25px';
    element.style.marginLeft = '-7px';
}

http://jsfiddle.net/Fs7G5/28/