使<select>中的文字居中

    项目中要用到<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;
        }
    })

     最后的结果是:


    

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值