当前位置：网站首页>取消select的默认样式的向下箭头和设置select默认字样

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

2022-07-07 22:30:00 【super码力】

取消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>