改变select样式

 css

 

.select {

        border: 1px solid #bdb2b2;

        border-radius: 10px;

        /*清除select聚焦时候的边框颜色*/

        outline: none;

        /*设置select的宽高*/

        width: 200px;

        height: 40px;

        line-height: 40px;

        /*隐藏select的下拉图标*/

        appearance: none;

        -webkit-appearance: none;

        -moz-appearance: none;

        /*通过padding-left的值让文字处于合适位置*/

        padding-left: 20px;

        /* 设置下拉图标 */

        background: url("1.jpg") no-repeat right center transparent;

    }

 html

<select class="select">

        <option value="volvo" disabled>Volvo</option>

        <option value="saab">Saab</option>

        <option value="opel">Opel</option>

        <option value="audi">Audi</option>

    </select>

option是html固有元素;无论怎么修改都是不起作用的。

想修改option样式,只能通过divulli重写下拉框效果 如下图  具体需求可以自己再次进行更改

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义select</title>

</head>

<style>

    .choose {

        padding: 8px 5px;

        width: 210px;

        outline: none;

        border: 1px solid rebeccapurple;

        border-radius: 5px;

    }

    .option {

        display: none;

        width: 180px;

        padding: 5px 10px;

        border-width: 0 1px 1px 1px;

        border-style: solid;

        border-color: #e2b5b5;

    }

    ul,

    li {

        margin: 0;

        padding: 0;

        list-style: none;

    }

</style>

<body>

    <input class="choose" type="text" placeholder="请输入" readonly="readonly">

    <div class="option">

        <ul>

            <li class="question">11</li>

            <li class="question">22</li>

            <li class="question">33</li>

        </ul>

</body>

<script>

    var choose = document.getElementsByClassName('choose')

    var option = document.getElementsByClassName('option')

    var question = document.getElementsByClassName('question')

    choose[0].addEventListener('click', function () {

        option[0].style.display = 'block'

    })

    for (var i = 0; i < question.length; i++) {

        question[i].addEventListener('click', function () {

            console.log(this.innerHTML);

            if (this.innerHTML === '33') {

                // 对于不能点击的选项

                alert('无效选项')

            } else {

                choose[0].value = this.innerHTML //获取dom的文本

                option[0].style.display = 'none'

            }

        })

    }

</script>

</html>

 

 效果如图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值