自定义HTML选择箭头图像

2024-06-02 • 问答

我想隐藏html选择列表的默认箭头，并将自定义图像（箭头）添加到列表中。

.form-inline select {
            margin: 10px 35px 15px 0px;
            background-color: #fff;
            font-size: 30px;
            width: 80px;
            color: #000;
            background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") center bottom no-repeat;
            cursor: pointer;
            display: block;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            border: none !important;
            justify-content:center;
            align-items:center;
            text-align:center;
        }

这是我目前的风格。它没有显示我想要的箭头。请帮帮我。

您正在将background和background-image CSS样式混合在一起，难怪您的样式无效：

简短版本：（我使用的是background而不是background-image）

background: salmon url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") no-repeat center calc(100% - 2px);
background-size: 24px 24px;

但是我建议采用这种方式以便于修改：

background-color: #fff;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center calc(100% - 2px);

仅供参考，此CSS部分将隐藏浏览器的默认箭头：

-webkit-appearance: none;
appearance: none;

自定义HTML选择箭头图像

luke_wonder 回答：自定义HTML选择箭头图像

大家都在问