CODEWITHSUNDEEP
javascripthtmlcss
blu10
blu10

Reputation: 654

how to display arrow only on Select control

Is there anyway to display the arrow only for a html select control I found the example below but it doesnt work for 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/

Upvotes: 2

Views: 869

Answers (2)

Treefish Zhang
Treefish Zhang

Reputation: 1161

If you would like the arrow to be of a bigger size, here is one workaround by c.bavota using CSS.

Upvotes: 0

Lloyd Banks
Lloyd Banks

Reputation: 36659

You could detect whether the user is using Internet Explorer and then change the select element width accordingly. If you want to minimize the white space that shows up on the left hand side of the drop down, you can also set the margin-left setting of the element to a negative value.

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/

Upvotes: 2

Related Questions