Checkout style state / country dropdown select

Question

I want to add a style to the country or state dropdown in the checkout page, how I can add a style for the option on :hover for example?

.opc-index-index .opc-wrapper-opc .form-list select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 1) url("../img/down_arrow.png") no-repeat scroll right 5px center;
    border: 1px solid #d8d8d8;
    color: black;
    font-family: "Muli",sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 4px;
    max-width: 100%;
    padding: 12px 20px;
    width: 100%;
}

.opc-index-index .opc-wrapper-opc .form-list select:focus{
background: rgba(212,212,212,1) url("../img/down_arrow.png") no-repeat scroll right 5px center;
color: white
}


.opc-index-index .opc-wrapper-opc .form-list select:focus{
background: rgba(177,177,177,1) url("../img/down_arrow.png") no-repeat scroll right 5px center;
color: white
}

Product view page:

    <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
            <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                <option><?php echo $this->__('Choose an Option...') ?></option>
              </select>

          </div>
    </dd>


<script type="text/javascript">
jQuery("#attribute<?php echo $_attribute->getAttributeId() ?>").select2({
    placeholder: "Select Size"
});
</script>

Answer 1

download from https://select2.github.io/ extract zip file and upload below files to your skin folder

select2-4.0.3\dist\js\select2.full.min.js

skin/frontend/your-package/your_theme/js/select2/select2.full.min.js

select2-4.0.3\dist\css\select2.min.css

skin/frontend/your-package/your_theme/css/select2/select2.min.css

now edit local.xml

app/design/frontend/your_package/your_theme/layout/local.xml

<default>
    ..........your existing code..

    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/select2/select2.min.css</name><params/></action>
        <action method="addItem"><type>skin_js</type><name>js/select2/select2.full.min.js</name><params/></action>
    </reference>

    ..........your existing code..

</default>

Add script to below file
app/design/frontend/your_package/your_theme/template/checkout/onepage/billing.phtml

<script type="text/javascript">
$(document).ready(function() {
    $("#billing:country_id").select2({
        placeholder: "Select a Country"
    });

    $("#billing:region_id").select2({
        placeholder: "Select a Country"
    });

    $("#billing:country_id").change(function(){
        $("#billing:region_id").select2("destroy");

        $("#billing:region_id").select2({
            placeholder: "Select a Country"
        });
    });

});
</script>

Code Not Tested

Answer 2

You could use jQuery (it's probably already loaded anyway) and add a class for the options in the select you want to change. Something like:

jQuery(document).ready(function(){
 jQuery("#your-select-id option").each(function(){
        jQuery(this).addClass("your-css-class");
 });
});

and then style appropriately in css