Question

I’ve made a custom select box using CSS and jQuery and until tonight I thought I was done.. but no..

The code can be viewed and played with here http://jsfiddle.net/nvv35/5/

The problem is that when using Firefox, IE or Safari the select box doesn’t get the correct width. If you look at the demo using Chrome you’ll see nothing wrong. The jQuery code sets the desired width for the “label” and the box looks pretty much perfect, but not in the browsers mentioned before..

The select label is way too short. Instead of getting the same width as the longest child in the drop-down it’s cut off right after the text.. I just simply can’t find where the problem lies..

So, I need your help guys ‘n gals.

UPDATE

Final code: http://jsfiddle.net/nvv35/9/

Answer 1

parseInt($(this).next(".selectBox").css("border-width"), 10) is resulting a NaN.

JsFiddle: http://jsfiddle.net/nvv35/8/

Change your code to as follows:

**Update:**To get the border-width correctly specific side of the border needs to be pecified. (Check: How to get border width in jQuery/javascript)

$(document).ready(function() {
  $("select").css("display", "none");
  $(".selectContainer").css("display", "inline-block");
  $(".selectHead").each(function() {
    var newWidth = $(this).next(".selectBox").outerWidth();
      var borderWidth = parseInt($(this).next(".selectBox").css("border-left-width").replace(/[^0-9]/g,""), 10) ;
      if(isNaN(borderWidth)) borderWidth  = 0;
    newWidth = newWidth - (borderWidth * 2);
    $(this).css("width", newWidth + "px");
  });
  $(".selectHead").on("click", function() {
    $(this).next(".selectBox").show();
    $(this).closest(".selectContainer").on("mouseleave", function() {
      $(this).find(".selectBox").hide();
    });
  });
  $("li", ".optionsBox").on("click", function() {
    var newValue = $(this).attr("id").replace(/(.*)-/,"");
    $(this).closest(".selectContainer").next("select").val(newValue);
    $(this).closest(".selectBox").prev(".selectHead").html($(this).html());
    $(this).closest(".selectBox").find(".optionSelected").removeClass("optionSelected");
    $(this).addClass("optionSelected");
    $(this).closest(".selectBox").hide();
  });
});