css下拉菜单清除默认值

在网页设计中，下拉菜单是常见的元素之一，能够方便用户选择需要的选项。但是，它默认的样式可能不符合我们的设计要求，因此需要进行样式修改。下面介绍如何使用CSS实现下拉菜单清除默认值。

<style>
    /*清除下拉菜单的默认值*/
    select{
        appearance:none;
        -webkit-appearance:none;
        -moz-appearance:none;
        border:none;
        outline:none;
        background:none;
        width:100%;
        height:100%;
        color:#000;
        font-size: 16px;
    }
    /*自定义样式*/
    .select-wrap{
        position:relative;
        width: 200px;
        height: 40px;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer;
    }
    .select-wrap select{
        position:absolute;
        top:0;
        left:0;
        opacity:0;
        cursor:pointer;
    }
    .select-wrap .select-text{
        display:block;
        padding:10px;
        font-size:16px;
    }
</style>

<div class="select-wrap">
    <select name="select1">
        <option value="value1">选项1</option>
        <option value="value2">选项2</option>
        <option value="value3">选项3</option>
    </select>
    <span class="select-text">请选择</span>
</div> 

以上代码中，通过设置appearance、-webkit-appearance和-moz-appearance为none，将下拉菜单的默认样式去掉。同时，设置border、outline、background、width和height等属性，实现自定义下拉菜单的样式。

下面看一下具体实现效果：

通过CSS样式的设置，自定义出了一个简单的下拉菜单。