title: How to style multiple instances differently of the same jquery control?
body: <p>I have <strong>multiple jquery comboboxes on the same page</strong> and I want to the set the width (and other styles) of each differently. Modifying these jquery classes changes all of them, <strong>but I want to style individually</strong>. How to do that?</p>
  
  <p><a href="http://jsfiddle.net/johntrepreneur/Sxv6g/13/" rel="nofollow">Here's a working example</a>
  <br>
  <b>OR</b>
  <br>
  you can just view the code below if you prefer.
  <br><br><br>
  <b>CSS: </b>(this changes all of them)<br></p>
  
  <pre><code>.ui-combobox-input
  {
      margin: 0; /*original value*/
      padding: 0.3em; /*original value*/
      width: 90px; /*change the default autocomplete textbox width (too wide)*/
  }
  /*this is for the dropdown box*/
  .ui-autocomplete
  {
      max-height: 400px; /*limits dropdown list height*/
      overflow-y: auto;   /* prevent horizontal scrollbar */ /*limits dropdown list height*/
      overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/
      z-index:1000 !important; /*limits dropdown list height*/
  }
  </code></pre>
  
  <p><br>
  <b>HTML</b>
  <br></p>
  
  <pre><code>&lt;div id="searchControlsBasic" runat="server" class="searchControlsBasic"&gt;
      &lt;div id="minPrice"&gt;
          &lt;select id="selMinPrice" class="selMinPrice" tabindex="3"&gt;
              &lt;option value=“”&gt;No Min&lt;/option&gt;
              &lt;option value=“50000”&gt;50,000&lt;/option&gt;
              &lt;option value=“75000”&gt;75,000&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
     &lt;div id="maxPrice"&gt;
          &lt;select id="selMaxPrice" class="selMaxPrice" tabindex="4"&gt;
              &lt;option value=“”&gt;No Max&lt;/option&gt;
              &lt;option value=“50000”&gt;50,000&lt;/option&gt;
              &lt;option value=“75000”&gt;75,000&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
     &lt;div id="beds"&gt;
          &lt;select id="selBeds" class="selBeds" tabindex="5"&gt;
              &lt;option value=“0”&gt;0+&lt;/option&gt;
              &lt;option value=“1”&gt;1+&lt;/option&gt;
              &lt;option value=“2”&gt;2+&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
     &lt;div id="baths"&gt;
          &lt;select id="selBaths" class="selBaths" tabindex="6"&gt;
              &lt;option value=“0”&gt;0+&lt;/option&gt;
              &lt;option value=“1”&gt;1+&lt;/option&gt;
              &lt;option value=“1.5”&gt;1.5+&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>Javascript:</b> (pretty much the same as the combobox demo)
  <br></p>
  
  <pre><code>$(document).ready(function()
  {
      $.widget("ui.combobox", {
          _create: function ()
          {
              var input,
                      self = this,
                      select = this.element.hide(),
                      selected = select.children(":selected"),
                      value = selected.val() ? selected.text() : "",
                      wrapper = this.wrapper = $("&lt;span&gt;")
                          .addClass("ui-combobox")
                          .insertAfter(select);
  
              input = $("&lt;input&gt;")
                      .appendTo(wrapper)
                      .val(value)
                      .addClass("ui-state-default ui-combobox-input")
                      .autocomplete({
                          delay: 0,
                          minLength: 0,
                          autoFocus: true,
                          source: function (request, response)
                          {
                              var requestTermNoCommas = request.term.replace(/,/g, "");
                              //var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original
                              var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i");
                              response(select.children("option").map(function ()
                              {
                                  var text = $(this).text(); //original
                                  var textNoCommas = $(this).text().replace(/,/g, "");
                                  //if (this.value &amp;&amp; (!request.term || matcher.test(text))) //original
                                  if (this.value &amp;&amp; (!request.term || matcher.test(textNoCommas)))
                                      return {
                                          //label: text.replace( //original
                                          label: textNoCommas.replace(
                                              new RegExp(
                                                  "(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" +
                                                  //$.ui.autocomplete.escapeRegex(request.term) + //original
                                                  $.ui.autocomplete.escapeRegex(requestTermNoCommas) +
                                                  ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "i"
                                              ), "&lt;strong&gt;$1&lt;/strong&gt;")
                                              // adds the thousands comma seperator after every third digit and takes into account the optional bold html markup
                                              .replace(/((&lt;strong&gt;)?(&lt;\/strong&gt;)?\d(&lt;strong&gt;)?(&lt;\/strong&gt;)?)(?=((&lt;strong&gt;)?(&lt;\/strong&gt;)?\d(&lt;strong&gt;)?(&lt;\/strong&gt;)?\d(&lt;strong&gt;)?(&lt;\/strong&gt;)?\d(&lt;strong&gt;)?(&lt;\/strong&gt;)?)+(?!(&lt;strong&gt;)?(&lt;\/strong&gt;)?\d(&lt;strong&gt;)?(&lt;\/strong&gt;)?))/g, "$1,"),
                                          value: text,
                                          option: this
                                      };
                              }));
                          },
                          select: function (event, ui)
                          {
                              ui.item.option.selected = true;
                              self._trigger("selected", event, {
                                  item: ui.item.option
                              });
                          },
                          change: function (event, ui)
                          {
                              if (!ui.item)
                              {
                                  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                      valid = false;
                                  select.children("option").each(function ()
                                  {
                                      if ($(this).text().match(matcher))
                                      {
                                          this.selected = valid = true;
                                          return false;
                                      }
                                  });
                                  // disabling this block since we want to leave custom values in combobox (that are conforming)
                                  /*if (!valid)
                                  {
                                      // remove invalid value, as it didn't match anything
                                      $(this).val("");
                                      select.val("");
                                      input.data("autocomplete").term = "";
                                      return false;
                                  }*/
                              }
                          }
                      })
                      .addClass("ui-widget ui-widget-content ui-corner-left")
                      .focus(function() // for selecting text on focus 
                      {
                          // fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select())
                          $(this).select().mouseup(function (e)
                          {
                              e.preventDefault();
                              $(this).unbind("mouseup");
                          });
                      });
  
              input.data("autocomplete")._renderItem = function (ul, item)
              {
                  return $("&lt;li&gt;&lt;/li&gt;")
                          .data("item.autocomplete", item)
                          .append("&lt;a&gt;" + item.label + "&lt;/a&gt;")
                          .appendTo(ul);
              };
  
              $("&lt;a&gt;")
                      .attr("tabIndex", -1)
                      .attr("title", "Show All Items")
                      .appendTo(wrapper)
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      })
                      .removeClass("ui-corner-all")
                      .addClass("ui-corner-right ui-combobox-toggle")
                      .click(function ()
                      {
                          // close if already visible
                          if (input.autocomplete("widget").is(":visible"))
                          {
                              input.autocomplete("close");
                              return;
                          }
  
                          // work around a bug (likely same cause as #5265)
                          $(this).blur();
  
                          // pass empty string as value to search for, displaying all results
                          input.autocomplete("search", "");
                          input.focus();
                      });
          },
  
          destroy: function ()
          {
              this.wrapper.remove();
              this.element.show();
              $.Widget.prototype.destroy.call(this);
          }
      });
  });
  
  $(document).ready(function()
  {
      // setup min &amp; max price, beds, and baths comboboxes
      $(".selMinPrice").combobox();
      $(".selMaxPrice").combobox();
      $(".selBeds").combobox();
      $(".selBaths").combobox();
      $("#toggle").click(function ()
      {
          $(".selMinPrice").toggle();
          $(".selMaxPrice").toggle();
          $(".selBeds").toggle();
          $(".selBaths").toggle();
      });
  });
  </code></pre>