jquery chosen select field is displayed wrong

Question

I'm trying to use jquery-chosen plugin on simple select code

<select class="chosen-select">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

Turn it on in js file

$(document).ready(function() {
    $(".chosen-select").chosen({no_results_text: "Oops, nothing found!", allow_single_deselect: true})
});

And my select field looks different from fields on jquery-chosen site examples:

What am i doing wrong? Not adding any css to this field?

Answer 1

Looks like you are referencing the css file as a script, it needs to be a css link:

<link rel="stylesheet" href="[path to file]chosen.css" />

or

<link rel="stylesheet" href="[path to file]chosen.min.css" />

point is to reference where the css or min.css file is. based on your comment it might be

<link rel="stylesheet" href="/static/chosen.css" />