I have been playing around with the Chosen jquery plugin. I have altered it to a dark style using CSS, but now i want to style the scrollbar so it is not the same default browser scrollbar which is way too light for my webpage. For most of the content on my page I am using NiceScroll plugin, and set the colors to be dark as well. I would really like to use this nicescroll in the Chosen search box as well, but when I try this it renders the searchbox unusable, as it refuses to drop down and search. Is there any plugin i can use to style the scrollbar in Chosen, or should I look for another way to style my search/input boxes all together?
$(".chosenbox").niceScroll();
using this makes the dropdown list no longer drop down, but it can still scroll through the items in list with the mousewheel.
echo "<div id='dark-select' class='box'>";
echo "<select name='band' class='chosenbox ui-widget-content ui-corner-left ui-corner-right ui-state-default'>";
echo "<option name='select' value='' disabled selected>Search by Band</option>";
while ( $therow = mysql_fetch_array($results) )
{
$theband = $therow["band"];
echo("<option name='");
echo($theband);
echo("' value='");
echo($theband);
echo("'");
if ($theband == $band)
echo(" selected");
echo(">");
echo($theband);
echo("</option>");
}
echo("</select>");
echo("</div><div class='box' width='100'> </div>");
this code creates the scrollbar, but incorrectly as it puts the scrollbar way over to the left, not inside the results where it should be.
$(".chosen-results").niceScroll();