Old question, but I just ran into this issue, so I came up with an alternate solution, inspired by the answer given by @kevnk My solution is to replace all selects, site wide, but it can simply be adjusted to target specific selects. This is done in magento EE 1.12, but I see no reason for it to work in other versions. I created the following script which does the following: 1. Extends the `isValidation` method of Validation with a fallback to the original (now named `_isValidation`) The original will be called for anything other than select, or if a select does not have a matching chosen element 2. Extends `insertAdvice` method of Validation. This purely changes the container to the matching chosen element, so the validation advice is placed after that 3. Listens to the chosen.change event to effect a new validation on the main select, to ensure validation errors go away. This has the side (positive) side effect that a validation error immediately appears if the selection is changed to none. Simply include this code via layout to your site. document.observe("dom:loaded", function() { Object.extend(Validation, { isVisible : function(elm) { if($(elm).tagName == 'SELECT') { if($(elm.id.replace(new RegExp('-', 'g'),'_')+'_chosen') != undefined) { return true; } } return this._isVisible(elm); }, _isVisible : function(elm) { while (elm.tagName != 'BODY') { if (!$(elm).visible()) return false; elm = elm.parentNode; } return true; }, insertAdvice : function(elm, advice){ if($(elm.id.replace(new RegExp('-', 'g'),'_')+'_chosen') != undefined) { var container = $(elm.id.replace(new RegExp('-', 'g'),'_')+'_chosen'); } else { var container = $(elm).up('.field-row'); } if(container){ Element.insert(container, {after: advice}); } else if (elm.up('td.value')) { elm.up('td.value').insert({bottom: advice}); } else if (elm.advaiceContainer && $(elm.advaiceContainer)) { $(elm.advaiceContainer).update(advice); } else { switch (elm.type.toLowerCase()) { case 'checkbox': case 'radio': var p = elm.parentNode; if(p) { Element.insert(p, {'bottom': advice}); } else { Element.insert(elm, {'after': advice}); } break; default: Element.insert(elm, {'after': advice}); } } } }); jQuery("select").chosen( { disable_search_threshold: 10, no_results_text: "Sorry, nothing found!", width: "100%", inherit_select_classes: true }); jQuery("select").chosen().change( function(e){ Validation.validate(e.target); }); }); ![enter image description here][1] After using this, I found that in checkout (OPC), the payment methods select boxes are not being transformed, as well as shipping, the state selection box is still visible. The issue is AJAXED in content. I fixe dthis by wrapping the realoadProgressBlock method in checkout, to re-init the chosen object, thus fixing ajaxed in content. Checkout.prototype.reloadProgressBlock = Checkout.prototype.reloadProgressBlock.wrap(function (parent) { jQuery("select").chosen( { disable_search_threshold: 10, no_results_text: "Sorry, nothing found!", width: "84%", inherit_select_classes: true }); parent(); }); Hope this is of help to someone. [1]: https://i.sstatic.net/KqpLy.png