2

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>

2 Answers 2

2

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

13
  • take a look I add what I do, but I need to style only the option not the entire select
    – Robert
    Apr 11, 2017 at 11:10
  • @RobertD you can not style option of select but either you can use third party Js to convert Select to <ul><li> list and then you can design <li> Apr 11, 2017 at 11:18
  • You can use select2.github.io/examples.html and select2.github.io Apr 11, 2017 at 11:20
  • if I use this script that dropdown will not work anymore, you test this?
    – Robert
    Apr 11, 2017 at 13:12
  • You need to work around it, I had used it many times Apr 11, 2017 at 13:15
0

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

2
  • Hi thank you is not work, you try it?
    – Robert
    Apr 11, 2017 at 13:22
  • I have something similar on one of my sites working OK. Did you replace "your-select-id" with the html id attribute of the select (possibly "shipping:region_id" but your may be different)? Where did you put the script. Mine is in System>Config>Design>Miscellaneous Scripts. You'll need to wrap it in <script> tags too.
    – jscar
    Apr 11, 2017 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.