jquery select-box - how can I have two inputs different widths

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

Answer 2

$(".sbHolder").first().addClass("first");

That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..

Other than that Joe answers the rest of your question.

Answer 3

Try this http://jsfiddle.net/FQKax/30/

<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>


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

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


  ##### JQUERY #######
      $(function () {
        $("#language").selectbox();
        $("#language2").selectbox();
        $(".sbHolder").each(function(){
          var $langDom = $(this);
          if($langDom.prev().attr('id') == 'language'){
            $langDom.addClass("language_1");  
          } else if($langDom.prev().attr('id') == 'language2') {
            $langDom.addClass("language_2");          
         }
       });
     });

    ###### CSSS TO ADD #####
   .language_1{
     width: 1200px;
    }

    .language_2{
      width: 200px;
     }

​

Answer 4

For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {} .

For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.