美文网首页
简单漂亮的下拉框

简单漂亮的下拉框

作者: flamez57 | 来源:发表于2020-02-22 11:00 被阅读0次

    如下图展示

    未展开状态 展开状态

    上代码:

    <style>

            div{

                width: 200px;

                height: 40px;

                border-radius: 5px;

                box-shadow: 0 0 5px #ccc;

                position: relative;

            }

            select{

                border: none;

                outline: none;

                width: 100%;

                height: 40px;

                line-height: 40px;

                appearance: none;

                -webkit-appearance: none;

                -moz-appearance: none;

                padding-left: 60px;

            }

    </style>

    <div>

        <select name="">

            <option value="1"> php在线运行</option>

            <option value="2"> java在线运行</option>

            <option value="3"> java在线运行</option>

        </select>

    </div>

    相关文章

      网友评论

          本文标题:简单漂亮的下拉框

          本文链接:https://www.haomeiwen.com/subject/natlqhtx.html