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

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

  • take a look I add what I do, but I need to style only the option not the entire select – Robert Apr 11 '17 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> – Nalin Savaliya Apr 11 '17 at 11:18
  • You can use select2.github.io/examples.html and select2.github.io – Nalin Savaliya Apr 11 '17 at 11:20
  • if I use this script that dropdown will not work anymore, you test this? – Robert Apr 11 '17 at 13:12
  • You need to work around it, I had used it many times – Nalin Savaliya Apr 11 '17 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

  • Hi thank you is not work, you try it? – Robert Apr 11 '17 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 '17 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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