css自定义select右侧下拉箭头

最新推荐文章于 2024-04-11 07:00:30 发布

原创最新推荐文章于 2024-04-11 07:00:30 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select #select自定义样式

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS去除HTML中select元素的默认样式，包括去掉右侧的黑色实心三角，并自定义下拉箭头样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

去掉select默认样式

去掉select右侧黑色实心三角样式 appearance: none;

select{
 	width: 90%;
    height: 100%;
    font-size: .28rem;
    font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif;
    outline: 0;
    border: none;
    background: none;
    box-sizing: border-box;
    -webkit-appearance: none; /*去掉右侧下拉三角默认样式*/
    appearance: none;
}
 /*自定义下拉三角样式*/
.arrow{
    position: absolute;
    top: 0.14rem;
    right: 0;
    width: 0.16rem;
    height: 0.16rem;
    border-top: 2px solid #9d4639;
    border-right: 2px solid #9d4639;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}