时间戳

首页 > 解决方案 > 将下拉菜单的插入符号替换为 SVG 图像

javascript - 将下拉菜单的插入符号替换为 SVG 图像

问题描述

有一个下拉列表，它是semantic-ui-react组件的一部分，如下所示：

在此处输入图像描述

<Dropdown
  className="hello-dropdown"
  placeholder="Comapany"
  onChange={this.someFunction}
  options={someOptions}
/>

CSS：

div.hello-dropdown {
    background: linear-gradient(180deg, #FCFCFC 0%, #F5F6F7 100%) !important;
    border-radius: 4px !important;
    margin-right: 20px;
    border: 1px solid #e8e8e8 !important;
}

在检查模式下，如果我选择插入符号，它会显示如下：

<i aria-hidden="true" class="dropdown icon"></i>

是否可以使用 SVG 图像修改插入符号？这是我要放置的图像https://svgur.com/s/Nmi

标签： javascripthtmlcssreactjssvg

解决方案

您可以隐藏箭头并使用:after伪选择器添加此箭头：

.hello-dropdown .dropdown.icon {
   display: none;
}

div.hello-dropdown:after {
   content: '';
   position: absolute;
   top: 50%;
   right: 5px;
   width: 14px;
   height: 7px;
   margin-top: -4px;
   background-size: contain;
   background-image: url('https://svgshare.com/i/Nmi.svg');
   background-repeat: no-repeat;
}

您也可以使用下拉图标伪选择器，但为了更准确，您必须提供 codepen 示例。:)

推荐阅读