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>
Best Answer
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
Add script to below file
app/design/frontend/your_package/your_theme/template/checkout/onepage/billing.phtml
Code Not Tested