时间戳

首页 > 解决方案 > CSS 自定义下拉箭头失败 ▼

css - CSS 自定义下拉箭头失败 ▼

问题描述

我不能定制它，他拒绝！重要 我错过了什么吗？

我的下拉代码笔

.fs-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    transition: ease-in 0.15s;
}

.fs-open .fs-arrow {
    transform: rotate(-180deg);
}

使用字体系列：“dashicons”失败

.fs-arrow{
    font-family: "dashicons" !important;
    content: "\f347" !important;
}

使用字体系列：“Font Awesome 5 Free” 失败

.fs-arrow{
    font-family:"Font Awesome 5 Free" !important;
    font-weight:600 !important;
    content: "\f078" !important;
}

我已经包含了所有的 FontAwesome 并且它显示了但在之后

所有这一切都不是很漂亮..

.fs-arrow:after{
        font-family:"Font Awesome 5 Free" !important;
        font-weight:600 !important;
        content: "\f078" !important;
    }

在此处输入图像描述 这是什么恐怖..

编辑 ：

如果有帮助..我这样做了，它仍然很可怕，但至少居中 在此处输入图像描述

他们在彼此之上

.fs-default > div > span{
    color:#f86c6c;
    top:-4px;
    left:195px;
    margin-bottom:24px;
    right:auto !important;
    width:23px;
}

标签： cssdropdown

解决方案

看看这个，我已经使用 fontawesome 完成了：

代码笔： https ://codepen.io/manaskandelwal1/pen/poEOPRK

您在动画中缺少的主要内容之一是transform-origin: center;

推荐阅读