pudly/index.html

## index.html
<!doctype html>
<html>
<head>
    <title>Select replacement</title>
</head>
<body>
    <form action="" method="post">
    <fieldset>
    <ol>
    <li>
        <label for="param_involvement">I want to</label>
        <select name="interest" id="param_involvement">
            <option value="attend">Attend</option>
            <option value="present">Present</option>
            <option value="volunteer">Volunteer</option>
        </select>
    </li>
    <li>
        <button type="submit">Submit Form</button>
    </li>
    </ol>
    </fieldset>
    </form>
</body>
</html>

## select.replace.js
// select replacement
$('select').each(function() {
    // variables
    var $this = $(this);
    var $form = $this.parents('form').eq(0);
    var id = $this.attr('id');
    var name = $this.attr('name');

    // hide and null the existing select
    $this.attr({'id' : '', 'name' : ''}).hide();

    // create new ul to replace select
    $this.after('<ul class="select"></ul>')

    // var for new ul
    var $select = $this.next('ul').eq(0);
    $select.wrap('<div class="select-container" />')

    // set data attribute for the consistent name
    $select.data('name', name);

    // currently selected (first) option
    $select.append('<li class="current">' + $('option', $this).eq(0).val() + '</li>');

    // duplicate all options in select to ul
    $('option', $this).each(function() {
        $select.append('<li>' + $(this).val() + '</li>');
    })

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

$('.select li.current').click(function() {
    $(this).parents('ul.select').toggleClass('active');
})

$('.select li:not(.current)').click(function() {
    var $this = $(this);
    var $select = $this.parents('ul').eq(0);
    var $hidden = $('input[name=' + $select.data('name') + ']');
    var $current = $('.current', $select);

    $current.text($this.text());
    $select.removeClass('active');
    $hidden.val($this.text());
})

// global blur state
$('body, html').mouseup(function(){
    if($('.select.active').length !=0) $('.select.active').removeClass('active');
});

## style.css
#signup .select-container {
    float: left;
    height: 60px;
    width: 170px;
    margin-right: 10px;
}

#signup ul.select {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #131b28 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
    font: 20px 'cubano', sans-serif;
    color: #fff;
    width: 170px;
}

#signup ul.select li {
    width: 150px;
    padding: 10px;
    height: 40px;
    line-height: 40px;
}

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

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

#signup ul.select li.current {
    cursor: pointer;
}

#signup ul.select li:hover {
    background: #1ea2c9;
}

#signup ul.select li.current:hover {
    background: #1ea2c9 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
}
	<!doctype html>
	<html>
	<head>
	<title>Select replacement</title>
	</head>
	<body>
	<form action="" method="post">
	<fieldset>
	<ol>
	<li>
	<label for="param_involvement">I want to</label>
	<select name="interest" id="param_involvement">
	<option value="attend">Attend</option>
	<option value="present">Present</option>
	<option value="volunteer">Volunteer</option>
	</select>
	</li>
	<li>
	<button type="submit">Submit Form</button>
	</li>
	</ol>
	</fieldset>
	</form>
	</body>
	</html>
	#signup .select-container {
	float: left;
	height: 60px;
	width: 170px;
	margin-right: 10px;
	}

	#signup ul.select {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #131b28 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
	font: 20px 'cubano', sans-serif;
	color: #fff;
	width: 170px;
	}

	#signup ul.select li {
	width: 150px;
	padding: 10px;
	height: 40px;
	line-height: 40px;
	}

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

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

	#signup ul.select li.current {
	cursor: pointer;
	}

	#signup ul.select li:hover {
	background: #1ea2c9;
	}

	#signup ul.select li.current:hover {
	background: #1ea2c9 url(../img/ico_arrow_sm.png) no-repeat 95% 23px;
	}