dropDownList Styling

I am trying to produce a re-styled dropdown list using the dropDownList (and its active brother) controls. The effect I want to achieve is:




<select name="select2" class="right curBox">

    <option value="Eur">EUR</option>

    <option value="Usd">USD</option>

</select>



in the css this uses ui.selectmenu to generate a different looking dropdown.

If I add the style to my control :




echo CHtml::dropDownList('srccur',$currency,CHtml::listData(Currency::model()->findAll(),'id','code'),

                  array(

                      'class'=>'right curBox',

                       ));



for some reason the style is not applied correctly.

Looking at the html generated by yii:




<a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown ui-state-active ui-corner-top" id="srccur-button" role="button" href="#" aria-haspopup="true" aria-owns="srccur-menu" style="width: 32px; "><span class="ui-selectmenu-status">GBP</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>



I would expect to see "right curBox" in the a class list - for it to work it looks like:




<a class="ui-selectmenu ui-widget ui-state-default right curBox ui-selectmenu-dropdown ui-state-active ui-corner-top" id="-button" role="button" href="#" aria-haspopup="true" aria-owns="-menu" style="width: 38px; "><span class="ui-selectmenu-status">EUR</span><span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span></a>

Any ideas? Do I need to create some sort of custom control here?

The problem is not in the styling of the list box. Somehow it is caused by CSS - I suspect there is a clash between some css that yii provides and the css that this control is using. I can drop in the native html and it appears wrong on this screen. I continue my investigation …

Solved - clash between latest versions of JQuery and the JQueryUI code.