SELECT Styling

by mickeyvip

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chosen/1.0.0/chosen.css">
<select id="select-no-1">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<select id="select-no-2">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<p class="with-selection">
    Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.
</p>

CSS

html {
    font-family: Georgia, serif;
}

select {
    background-color: #f00;
}
select option {
    background-color: #0f0;
}

p.with-selection::-moz-selection {
    background: #ffb7b7;
    color:#fff;
}
p.with-selection::selection {
    background:#ffb7b7;
    color:#fff;
}

.chosen-container .chosen-results li.highlighted {
    background-image: none;  /* reset the gradient, overriding next rule */
    background-color: #ffb7b7;
}

JavaScript

var $select2 = $("#select-no-2");
$select2.chosen();