If you are happy with using JavaScript for that, you can do it by handling the events:
selecting
selected
unselecting
unselected
To add/remove your custom classes.
Say you have classA
for "selecting" and classB
for "selected". Your selectable should be created like this:
$(".ui-splitselect-list").selectable({
cancel: ".ui-splitselect-item .ui-splitselect-handle-drag",
selecting: function (event, ui) {
$(ui.selecting).addClass('classA');
},
unselecting: function (event, ui) {
$(ui.unselecting).removeClass('classA');
},
selected: function (event, ui) {
$(ui.selected).addClass('classB');
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('classB');
}
});
Applied to your fiddle: http://jsfiddle.net/CjT3r/4/