title: Changing style and position of created multi-select drop-down checkbox
body: <p>I am trying to create the front end for an web application. I already have the backend developed in python. I am new to this territory of web design/development</p>
  
  <p>I have some html and javascript code which uses jQuery multiselect.css and jQuery multiselect.js to create a dropdown multiselect checklist. However I am confused with how i can change the style or position of the dropdown, as I am already using jQuery multiselect.css</p>
  
  <p>I added the css and the js under the head tag</p>
  
  <pre><code>  &lt;link href="jquery.multiselect.css" rel="stylesheet"&gt; 
  
    &lt;script src="jQuery.js"&gt;&lt;/script&gt; 
    &lt;script src="jQuery-MultiSelect-master/jquery.multiselect.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And then I am creating the dropdown list in html and using jQuery to initialize it</p>
  
  <pre><code>&lt;select id='testSelect1' multiple&gt;
    &lt;option value='1'&gt;Item 1&lt;/option&gt;
    &lt;option value='2'&gt;Item 2&lt;/option&gt;
    &lt;option value='3'&gt;Item 3&lt;/option&gt;
    &lt;option value='4'&gt;Item 4&lt;/option&gt;
    &lt;option value='5'&gt;Item 5&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script src="./test.js"&gt;&lt;/script&gt;
  &lt;script&gt;
     $('#testSelect1').multiselect({
     columns: 4,
     placeholder: 'Select Countries',
     selectAll: true
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>This puts the multiselect on the left and makes the dropdown width as wide as the page width and height longer then needed. I am trying to modify it so that it would appear in the middle and the size of the dropdown isn't as bit and colour of the dropdown array is different</p>