How to position the select element while using Chosen?

Tags: jquery,html,css,jquery-chosen

Problem :

I'm using inputs from this question: How do I use Chosen jQuery in my html file? So I have a select box, but the problem is I'm having trouble styling the select element.I used left and top % in CSS to position it, but it does not work.How can I position and style the select element?

A little snippet:

<select class="chzn-select" multiple="true" name="faculty" style="width:200px;">
    <option value="AC">A</option>
    <option value="AD">B</option>
    <option value="AM">C</option>
    <option value="AP">D</option>

Solution :

chzn-container will be the right class to add position and this can done in 2 ways.

  1. Adding the attribute directly in chosen.css file.
  2. Adding the attribute via jQuery as mentioned below.


DEMO in Jsfiddle.

    CSS Howto..

    CSS exit box how to? [closed]

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    How to have a sidebar on the right in a responsive page with maximum width?

    How to find the highest z-index using jQuery

    How to “add details” to CSS (example Box shadow)

    How to to change CSS double class properties through script

    Only show limiited div's depending on browser width

    How to make to div comes the one under the other

    How Do I Add CSS Transition Effect to This

    How can I set up my menu to slide out, only when the header is hovered on?

    How to get div height 100% inside td of 100%

    How to find everything that is not matching a regular expression

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    How can I align this?

    IE11 CSS bug with clear:right - how to workaround?

    How to style the last element before another specific element in CSS? [duplicate]

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    How to edit the CSS of a td element through the hierarchy?

    how to choose what transform is applied first in css

    How do you spin side to side using css3 animation?

    CSS: How do I make a !100% header with a repeat-x background and tip

    Progress Bar in jquery showing reverse animation

    How to make a floated element take the entire width of its parent

    CSS layout - How to lay every box especially when sidebar is not staying in the container?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to style 2 vertical jQuery UI Slider handles?

    How to make my web page look Ok with IE7+? [closed]

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    Hiding and showing
    • on click using Javascript

    The tops of these links aren't working, how can I get the link inside just the buttons?