用于jquery的css选择不在codeigniter中工作

I have been trying for multi select dropdown from 5 months!!. Finally found chosen jquery library. I have tried it with all possible combinations and referred over 10 different links. Still css not working.Please help.

Problem specifications:

Below is my view file

    <!doctype html>
<html>
    <body>
        <head>
            <title>Add a title</title>
            <!--Css used for chosen dropdown -->
            <link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/chosen.css">
            <link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/prism.css">
            <link rel="stylesheet" href="<?php echo base_url(); ?>chosen/css/style.css">
        </head>
        <body>
          <h1>HELLO DD</h1>
            <select class="chosen-select" tabindex="8" multiple style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected>Sloth Bear</option>
                <option disabled>Sun Bear</option>
                <option>Polar Bear</option>
                <option disabled>Spectacled Bear</option>
            </select>

            <script src="<?php echo base_url(); ?>chosen/js/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="<?php echo base_url(); ?>chosen/js/chosen.jquery.js" type="text/javascript"></script>
  <script src="<?php echo base_url(); ?>chosen/js/prism.js" type="text/javascript" charset="utf-8"></script>
  <script src="<?php echo base_url(); ?>chosen/js/init.js" type="text/javascript" charset="utf-8"></script>
            <script>
                $(document).ready(function() {
                    $(".chosen-select").chosen();
                 });
             </script>
    </body>
</html>