Chosen Plugin in Seblod
Waking up at 6.00 this morning was the best feeling as I have managed to figure this one out. For people who may be stuck like me.
1. Download Chosen plugin
2. Copy chosen.min.css to the css folder in your template folder and chosen.query.min.js to the js folder in your template folder. Joomla has already got chosen folders in media/jui/... but they might not be as up to date as your downloaded version.
3. Edit your template index.php by adding links to your css and js files between the <head> </head> tags.
<link rel="stylesheet" href="/templates/yourtemplatename/css/chosen.min.css" />
<script src="/templates/yourtemplatename/js/chosen.jquery.min.js"></script>
4. Go to your Seblod form, click on the pen on the left of your field, click on the orange arrow on the left bottom corner of the Storage section. Under Stuff, in Class (CSS) enter field_name , in Script (JS) enter $(".field_name").chosen();
5. In chosen.min.css, changed the padding to centre text under
.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:5px 0 0 5px;
Hope this helps, that is how I got it working.