When using a <select>
tag that shows all options, here's a work around using <div>
instead:
HTML
<div id='sectionOptionsSelect' size='5' class='block1'
style='visibility: hidden; border: 1px solid gray; padding: 5px; '>
<span class='addPageBreakAbove'>Add Page Break Above</span>
<span class='addPageBreakBelow'>Add Page Break Below</span>
<span class='removeSection'>
<label class='fa fa-window-close'
style='font-size: 25px; color: red; background: white; '></label>
Remove Section</span>
</div>
Supporting JS
$('#sectionOptionsSelect span').hover(function () {
$(this).css('background', '#c0ec67');
}, function () {
$(this).css('background', 'transparent');
});
$('.removeSection').click(function () {
alert('removeSection');
});
CSS
#sectionOptionsSelect span {
display: block;
}