html - 自定义选择下拉菜单

Question

我正在努力自定义选择下拉菜单。

这是最终结果。

我可以通过选择下拉菜单来完成吗？

非常感谢任何帮助或示例链接。

干杯!

Answer 1

是否使用选择元素以外的其他选项？如果是，你可以用一个下拉插件替换它，比如Bootstrap 提供的那个。像这样的组件将比选择更容易定制和设置样式。如果您打算在表单或可能需要 select 的本机功能的地方使用它，您仍然可以使用 Bootstrap 下拉菜单，在顶部添加我开发的这个插件：Dropdown-select 希望这会有所帮助。

Answer 2

使用纯 HTML 和 CSS有点痛苦。但是，如果您对插件感兴趣，可以select2使用模板

它具有标志以及自定义的名称，如下所示

Answer 3

这完全显示了我发布的图像。但是，我没有使用下拉菜单。

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;
                }
            });         
        });