select默认样式修改

作者: 曼木子 | 来源:发表于2018-11-22 22:23 被阅读0次

select默认样式修改
【CSS修改下拉选框select的默认样式】
修改select的默认样式
修改select下拉框默认样式
CSS如何清除默认样式
select修改样式
select清除默认样式
修改默认样式
修改文本显示样式为Linux
css默认样式处理

select默认样式中的小三角不能删掉，要修改它的样式，只能使用图片将其隐藏掉。
示例：

 <style>
        .parent {
            display: flex;
            width: 100%;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
        }
        .select {
            width: 200px;
            height: 2rem;
            border: 1px solid rgba(48, 43, 43, 0.3);
            /*内容居中显示*/
            text-align: center;
            text-align-last: center;
            /* 去掉select自带的样式 */
            appearance: none;
            /* IE */
            -webkit-appearance: none;
            /* google */
            -moz-appearance: none;
            /* firefox */
            background: url("img/arrow_down.png") no-repeat scroll right center transparent;
            background-size: 10% 30%;
            /* 手势样式 */
            cursor: pointer;

        }
        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand {
            display: none;
        }
    </style>
    <body>
        <div class="parent">
        <label for="">浏览器选择：</label>
        <select class="select" name="" id="" placeholder="请选择使用的浏览器">
            <option value="1">百度</option>
            <option value="2">谷歌</option>
            <option value="3">火狐</option>
            <option value="4">360浏览器</option>
            <option value="5">UC浏览器</option>
        </select>
        </div>
     </body>

推荐一个好用的图标下载网站：https://www.easyicon.net/