取消select的默认样式的向下箭头和设置select默认字样

super码力

于 2022-07-06 08:46:26 发布

阅读量1.8k

点赞数 1

分类专栏： # 小小小小小bug 文章标签：大数据

本文链接：https://blog.youkuaiyun.com/m0_61843874/article/details/125631911

版权

小小小小小bug 专栏收录该内容

3 篇文章

订阅专栏

💙取消select的默认样式的向下箭头

向下箭头如下图：

这里可以设置这样子一个属性appearance:none;可以清除select的默认样式，变成如下图的样子：

样式代码：

//样式
<style>
        select{
            width: 100px;
            appearance:none;    //清除默认样式
        }
</style>

//结构
<body>
    <form action="">
        <select name="" id="">
            <option value="">北京</option>
            <option value="">武汉</option>
            <option value="">上海</option>
        </select>
    </form>
</body>

💚select设置默认字样

默认字样只显示一次，在选项中不出现，效果如下图：

样式代码：

<body>
    <form action="">
        <select>
            //关键代码行
            <option selected="selected" disabled="disabled"  style='display: none' value=''>请选择性别</option>
            //选项
            <option>男</option>
            <option>女</option>
        </select>
    </form>
</body>