Customize a select dropdown

Question

I'm struggling to customise a select drop-down.

Here is the final result.

enter image description here

Can I do it via a select dropdown?

Any help or examples links is really appreciated.

Cheers!

I had create the dropdown, however adding flags inside the dropdown is a problem. http://jsfiddle.net/yVDrV/ I'm thinking if it is possible with dropdown — Romain, Nov 05 '13 at 13:00
This question appears to be off-topic because it does not make any attempt to solve the problem. — cimmanon, Feb 28 '14 at 14:05

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

Using pure HTML and CSS is a little pain. However if you're interested in plugin you can use select2 with Templating

It has flag along with names customized like below

enter image description here

edited May 23 '17 at 10:32

Community

1
1

answered Nov 05 '13 at 13:24

Praveen

55,303
33
133
164

score 1 · Answer 2 · answered Nov 12 '13 at 20:33

Is using something other that a select element an option? If it is, you could replace it with a dropdown plugin, like the one that Bootstrap offers. A component like this one will be far more easier to customize and style that a select. If you are planning to use it in a form or somewhere where the native capabilities of select may be needed, you can still use Bootstrap dropdown, adding on top something like this plugin that I developed: Dropdown-select Hope this helps.

score 0 · Accepted Answer · answered Nov 13 '13 at 00:53

This display exactly the image that I posted. However, I didn't use a drop-down.

HTML

    <div id="nav-country">
        <div id="top-country">
            <div id="left-top-c-container">
            <?php
                if ($_SESSION['australasia']==1) { ?>

                    <img id="auz-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/auz.png" alt="flag icon auztralasia">
                    <p>AUZ</p>                      
                <?php } else { ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/uk.png" alt="flag icon united kingdom">
                    <p>UK</p>
            <?php } ?>
            </div>
            <div id="right-top-c-container">
                <div id="right-arrow">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/arrow_dropdown.png" alt="small arrow image">
                </div>
            </div>
        </div>
        <div id="bottom-country">
            <?php
                if ($_SESSION['australasia']==1) { ?>   
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/uk.png" alt="flag icon united kingdom">
                    <p>UK</p>                               
                <?php } else { ?>
                    <img id="auz-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/auz.png" alt="flag icon auztralasia">
                    <p>AUZ</p>                              
            <?php } ?>      
        </div>
    </div>

CSS

/* COUNTRY FLAGS SELECTORS
 ================================================== */

#nav-country {
    position: absolute;
    z-index: 11;
    right: 2%;
    top: 13px;
}


#top-country {
    width:84px;
    height: 26px;
    font-size: 11px;
    line-height: 13px;
    font-family: 'Open Sans', sans-serif;
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px;
    background-color: #EEEEEE;  
}

#left-top-c-container {
    float: left;
    width:64px;
    height: 26px;
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px;
}

#right-top-c-container {
    float: left;
    width:20px;
    height: 26px;
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    background-color: #E2E2E2;  
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;  
}

 #bottom-country {
    opacity: 0;
    width:84px;
    height: 26px;
    font-size: 11px;
    line-height: 13px;
    font-family: 'Open Sans', sans-serif;
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px;
    border-top-right-radius: 0px;
    background-color: #E2E2E2;  
    visibility: hidden;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#bottom-country:hover, #bottom-country:focus {
    visibility: visible !important;
    opacity: 1 !important;
}

/*  Show the total country list  */
.visible {
    visibility: visible !important;
    opacity: 1 !important;
}


#right-arrow img {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Add the border to the arrow */
.rotate-on {
    border-bottom-right-radius: 0px !important;
}

/* Rotate the selected country drop-adown arrow */
.rotate-on img {
    -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(180deg);        /* FF */
    -o-transform: rotate(180deg);          /* Opera */
    -ms-transform: rotate(180deg);         /* IE9 */
    transform: rotate(180deg);             /* W3C complaint browsers */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');   /* IE8 and below */
}

#top-country p, #top-country img, #bottom-country p, #bottom-country img {
    float: left;
/*  margin-top: 6px; */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#left-top-c-container img, #bottom-country img{
/*  margin: 7px 8px 7px 10px; */
    margin: 7px 8px 7px 9px;
}

#top-country p, #bottom-country p {
    margin-top: 7px;
}

#top-country #right-arrow {
    background-color: #E2E2E2;
    display:inline-block;
    margin-top: 10px;
    margin-left: 4px;
}

/* Add color text effect on the list of country */
#bottom-country:focus p, #bottom-country:hover p {
    color: #FFA217;
}

img#auz-img {
    margin: 7px 4px 7px 9px;
}

Jquery

        jQuery(document).ready(function() {
            jQuery("#top-country").hover(function(){
                // Add class rotate-on to the 
                jQuery("#right-top-c-container").toggleClass("rotate-on");
                jQuery("#bottom-country").toggleClass("visible");
            });

//          Let the arrow pointing down when we are hovering the country list 
            jQuery("#bottom-country").hover(function(){
                jQuery("#right-top-c-container").toggleClass("rotate-on");

            });

            jQuery("#bottom-country").click(function(){
                //  We want to redirect to the correct url
                var country_value = jQuery("#bottom-country").children("p").text();
                if(country_value=="UK"){
                    var pathname = window.location.href;
//                  console.log(pathname);
                    pathname = pathname.replace('e.au.t','e.t');
                    pathname = pathname+"?selected_c=uk";
                    window.location.href = pathname;
                }
                else if (country_value=="AUZ") {
                    var pathname = window.location.href;
//                  console.log(pathname);
                    pathname = pathname.replace('e.t', 'e.au.t');
                    pathname = pathname+"?selected_c=au";
//                  console.log(pathname);
                    window.location.href = pathname;
                }
            });         
        });

Customize a select dropdown

3 Answers3