使<select>中的文字居中

最新推荐文章于 2022-11-10 10:38:14 发布

原创最新推荐文章于 2022-11-10 10:38:14 发布 · 2.7w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#select

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种自制的下拉菜单实现方案，通过HTML、CSS和JavaScript模拟了一个居中的<select>下拉菜单，并实现了选项切换及隐藏已选项目的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中要用到<select>下拉菜单，但是显示的文字不能居中……不能居中实在太丑了吧……查过<select>根本没有能让文字居中的属性。最后只能自己模拟一个，废话不说直接上代码。

这里的下拉菜单是用来选择月份的，一共有三个月，默认为当前月份。在菜单里，如果选择了的，就填到<span>里去，然后在菜单里隐藏这一项，显示其他两项。

    <style>

        .ui-select {
            margin-top: 5%;
            text-align: center;
        }
        .ui-select select {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 3em;
            opacity: 0;
        }

    </style>

<!--外层是boostrap。下拉框菜单 -->
    <div class="row-fluid">
        <div class="span12">
            <div class="ui-select">
            <ul  class="unstyled list-group">
                <li class="list-group-item" style="background-color: #59ABED;color: #ffffff">

                    <span id="last00" style="background-color: #59ABED;color: #ffffff"></span>
                    <select id="select">
                        <option id="last0" value="last0"></option>
                        <option id="last1" value="last1"></option>
                        <option id="last2" value="last2"></option>
                    </select>
                </li>
            </ul>
            </div>
        </div>
    </div>

//选择菜单的处理方法：点击谁<span>就是谁的值；点击谁谁就隐藏，其他显示
    $("#select").change(function(){
        var select=$("#select").val();
        switch(select)
        {
            case "last0":
                var last0= $("#last0").text();
                $("#last00").text(last0+" "+"▼");
                $("#last0").hide();
                $("#last1").show();
                $("#last2").show();
                $("#body").empty();
                attendance_check.getdatelast0_sign();
                break;
            case "last1":
                var last1= $("#last1").text();
                $("#last00").text(last1+" "+"▼");
                $("#last1").hide();
                $("#last0").show();
                $("#last2").show();
                $("#body").empty();
                attendance_check.getdatelast1_sign();
                break;
            case "last2":
                var last2= $("#last2").text();
                $("#last00").text(last2+" "+"▼");
                $("#last2").hide();
                $("#last0").show();
                $("#last1").show();
                $("#body").empty();
                attendance_check.getdatelast2_sign();
                break;
        }
    })

最后的结果是：