Question

I’m using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/

Here’s a fiddle of it working:
http://jsfiddle.net/FQKax/1/

I want to have the two dropdowns to be different widths but I’ve tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.

Also I’m ashamed to admit I can’t seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text… weird

Answer 1

There’s an option that you can specify what to use as classname for the sbHolder object, but you don’t want to change that since you would need to rewrite the CSS. It’d be nice if they let you set an additional class to apply, but they don’t.

I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/

.wrapper-one .sbHolder{
    width: 500px;
}

.wrapper-two .sbHolder {
    width: 200px;
}


<div class="wrapper-one">
<select id="language">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>
<br/><br/>

<div class="wrapper-two">
<select id="language2">
    <option value="javascript">Javascript</option>
    <option value="objective-c">Objective C</option>
    <option value="python">Python</option>
</select>
</div>

This requires adding some markup, @cih’s answer doesn’t. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/

$("#language").selectbox();
$("#language2").selectbox();

$(".sbHolder").each(function(index){
    $(this).addClass('instance-' + index);
});

.instance-0.sbHolder{
    width: 500px;
}

.instance-1.sbHolder {
    width: 200px;
}