Hello everyone. The select tag that comes with html is pretty useful, but once in a while, one of your clients complains that it’s fugly. So you need to make  a custom one. And that’s what i just did. Damned clients!

Requirements:

• jquery

To do this you need to create a file called customSelect.ctp in your app/views/elements folder(Of course you don’t NEED cakephp to use this.).

And the content said file would be(This example is for a category select menu.):

<div class="customSelect">
<div class="selectLeft">
<div class="selectOptions" style="display:none;">$name){ ?></div>
<input class="selectInput" name="<?php echo $inputName;?>" type="hidden" /></div>
<div class="selectRight">
<div class="selectDropDownArrow"><img src="img/dropDownArrow.jpg" alt=">>" /></div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
	//set the default item to show
	setSelectedOption('');
});
// ]]></script>

the javascript file, customSelect.js

$(document).ready(function(){
//capture clicks anywhere and hide dropdown menu
$(this).click(function(){
$('.selectOptions').slideUp('fast');
});
//click on the selected item div to toggle menu
$('.selectedCategoryDiv').click(function(e)
{
$(this).siblings('.selectOptions').slideToggle('fast');
e.stopPropagation();

return >false;
});
//click on the down arrow to toggle menu
$('.selectDropDownArrow').click(function(e){
$(this).parent('.selectRight').siblings('.selectLeft').children('.selectOptions').slideToggle('fast');
e.stopPropagation();

return >false;
});
//hover on menu item to change color
$('.selectOptions').children('div').hover(
function(){
$(this).addClass('hoverItem');
},
function(){
$(this).removeClass('hoverItem');
}
);
//click on menu item to select
$('.selectOptions').children('div').click(function(e){
$(this).parent('.selectOptions').siblings('.selectInput').val($(this).attr('value'));
$(this).parent('.selectOptions').slideUp('fast');
$(this).parent('.selectOptions').siblings('.selectedCategoryDiv').html($(this).html());
e.stopPropagation();

return >false;
});
});
function setSelectedOption(id)
{

if(id != '')
{
$('.selectOptions').each(function(){
$(this).children('div').each(function(){

if($(this).attr('value') == id)
$(this).click();
});
});
}
}

the css file, customSelect.css

.customSelect
{
padding:0 4px;
}
.selectedCategoryDiv
{
background-color:#FFFFFF;
padding:4px 5px;
font-weight:bold;
font-size:16px;
width:215px;
cursor:pointer;
}
.selectLeft
{
float:left;
border-top:1px solid #93a8ad;
border-bottom:1px solid #FFFFFF;
border-left:1px solid #bac8cb;
border-right:1px dotted #93a8ad;
position:relative;
}
.selectOptions
{
position:absolute;
top:29px;
left:0px;
background-color:#FFFFFF;
width:225px;
padding:0;
}
.selectOptions div
{
padding:2px 7px;
cursor:pointer;
font-size:16px;
}
.selectRight
{
float:left;
background-color:#FFFFFF;
border-top:1px solid #93a8ad;
border-bottom:1px solid #FFFFFF;
border-left:none;
border-right:1px solid #FFFFFF;
}
.selectDropDownArrow
{
padding:7px 8px 6px 8px;
cursor:pointer;
border:none;
margin:0;
}
.hoverItem
{
color:#ef3e36;
}

and the image

You need to include the javascript and js files in your layout file.
And to call the element from your view files, you can do this

//input name is the name of original select
//datais an array of menu items, how you structure is up to you
//selected is the value of the selected menu item
echo $this->element('customSelect',array('inputName'=>'data[category]','data'=>$categories,'selected'=>''));