图标未附加到所选项目答案

【问题标题】：The icon is not attached to the selected item图标未附加到所选项目
【发布时间】：2023-01-26 20:13:52
【问题描述】：

我有一个自定义的组合框组件，我想为突出显示的项目和选定的项目添加样式。我想在选定的旁边添加，但它总是显示在第一项，这里有什么问题？ enter image description here

.combobox-option {
  padding: 0.25em 0.5em;
  cursor: pointer;

  &.selected {
    background-color: red;
    color: var(--color-white);

    &::after {
      content: " ";
      cursor: pointer;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      background-image: url(../check.svg);
      background-repeat: no-repeat;
      background-position: right;
      background-size: contain;
    }
  }
  &.highlighted {
    background-color: var(--color-bg-blue);
    color: var(--color-white);
  }
}

<li
    tabIndex={0}
    className={clsx(
       "combobox-option",
        option.value === search && "selected",
        index === highlightedIndex && "highlighted", 
     )}
     key={option.label}
     onClick={() => {
         optionSelected(index);
         setIsOpen(false);
      }}
>
     <span>{option.value}</span>
</li>

【问题讨论】：

标签： css reactjs

【解决方案1】：

您似乎缺少伪元素的相对定位的祖先。很可能你应该将 position: relative 添加到 .combobox-option 类描述中——这样 CSS 就会知道它应该将你的复选标记图标放置在哪个元素上。否则它会坚持到最近的元素，其位置不同于默认的static——或者，如果页面上没有元素，则坚持到文档的最顶部。希望能帮助到你！

【讨论】：