I need to create custom styled select drop downs (there are three) form inputs.

Question

0

Asked: June 14, 20262026-06-14T11:44:02+00:00 2026-06-14T11:44:02+00:00

I need to create custom styled select drop downs (there are three) form inputs.

0

I need to create custom styled select drop downs (there are three) form inputs. I have used jquery to accomplish this as I’m not aware of a good way to do this in CSS. The issue I’m having is that despite messing with the z-index of the various elements, the menu’s drop down BEHIND the other form inputs. I have looked at the answers to each of:
Why is the drop down menu hiding behind jQuery button? (basically the exact problem i’m having – no good solution found)
Drop down being hidden behind banner button

However the solutions don’t seem to work for me. You can see a working version of the problem here: http://jsfiddle.net/SANdM/5/

This is the select code (there are 3 of these):

<select name="data[Product][to_relationship]" class="input-medium" id="to_relationship">
  <option value=""></option>
  <option value="F|1|Mother">Mother</option>
  <option value="M|1|Father">Father</option>
  <option value="M|2|Boyfriend">Boyfriend</option>
  <option value="F|2|Girlfriend">Girlfriend</option>
  <option value="F|3|Friend (F)">Friend (F)</option>
  <option value="M|3|Friend (M)">Friend (M)</option>
</select>

This is the jquery code to convert the select into a ul:

$('select').each(function() {
    //esape the square brackets in the name attribute


    function $escape(string) {
        return string.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    }

    function $unescape(string) {
        return string.replace(/\\/g, '');
    }
    // create new ul to replace select
    $(this).after('<ul class="select"></ul>');

    // define objects
    var $this = $(this); // exising <select> element
    var $select = $this.next('ul.select').eq(0); // new <ul> version of the select
    var $form = $this.parents('form').eq(0); // the containing form
    // define variables
    var id = $this.attr('id'); // id of the <select>
    // name of the <select>
    var name = $escape($this.attr('name')); // name of the <select>
    // wrap the new ul in a div we can use to anchor positioning
    $select.wrap('<div class="select-container"/>');

    // set a custom data attribute to maintain the name from the original select on the new ul
    $select.data('name', name);
    $select.attr('id', id);
    // grab the first <option> item in the <select> and populate the currently selected (first) option in the ul
    $select.append('<li class="current">' + $('option', $this).eq(0).html() + '<span class="value">' + $('option', $this).eq(0).val() + '</span></li>');

    // duplicate the rest of <option>s in select to ul
    $('option', $this).each(function() {
        $select.append('<li>' + $(this).html() + '<span class="value">' + $(this).val() + '</span></li>');
    });

    // add hidden field to form to capture value from ul
    $form.append('<input type="hidden" name="' + $unescape(name) + '" value="' + $('option', $this).eq(0).val() + '" />');

    // remove the old <select> now that we've built our new ul
    $this.remove();
});
$('.select li.current').click(function() {

    // toggle the visible state of the ul
    $(this).parents('ul.select').toggleClass('active');
});

$('.select li:not(.current)').click(function() {

    // objects
    var $this = $(this);
    var $select = $this.parents('ul').eq(0);
    var $hidden = $('input[name=' + $select.data('name') + ']');
    var $current = $('.current', $select);

    // set the current text
    $current.html($this.html());

    // close the ul
    $select.removeClass('active');

    // populate the hidden input with the new value
    $hidden.val($this.find('.value').text());
});
$('body, html').mouseup(function() {
    if ($('.select.active').length != 0) {$('.select.active').removeClass('active');}
});

And the CSS to style it is:

.select-container {
    float: left;
    height: 40px;
    min-width: 170px;
    margin-right: 10px;
    position:relative;
}
.pull-left{float:left}


ul.select {
    list-style: none;
    color: #ee3925;
    width: 170px;
    border: 3px solid #ee3925;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
      border-radius: 8px;
    position: absolute;
    background-color:#FFF;
}


ul.select li {
    min-width: 100px;
    padding:0 10px;
    height: 30px;
    line-height: 30px;
    border: 0px solid #FFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color:#FFF;
}

ul.select li:not(.current) {
   display: none;

}

ul.select.active li {
    display: block;
}

ul.select li.current {
    cursor: pointer;
    font-weight:bold;
}

ul.select li:hover {
    cursor: pointer;
}

.value{display:none;}

Any help would be greatly appreciated