如何开始在输入文本内的图标右侧输入文本？

Question

我正在尝试重现这个：输入图标类型搜索

到目前为止我的结果：我的结果

我的问题是：如何放置此输入元素以开始在第一张图像中的图标右侧键入文本？

我试图将类型元素更改为（不工作），尝试（不工作）显示图标。 我正在使用样式化组件。

那是我的 CSS：

import styled from "styled-components";

export const DivSearch = styled.div`
  display: flex;
  flex-direction: row;
  margin-right: 90px;
  margin-top: 27px;
  justify-self: flex-end;
  align-self: flex-end;
`;

export const Icon = styled.img`
  width: 14px;
  height: 14px;
  position: absolute;
  margin-left: 7px;
`;

export const PlusIcon = styled(Icon)`
  align-self: center;
  justify-self: flex;
  padding-left:10px;
  filter: invert(100%);
`;

export const SearchIcon = styled(Icon)`
  align-self: center;
  justify-self: flex;
  filter: invert(27%) sepia(95%) saturate(2117%) hue-rotate(208deg) brightness(112%) contrast(101%);
`;

export const Input = styled.input`
  width: 296px;
  height: 35px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #cccfde;
  border-radius: 5px;
  opacity: 1;
  margin-right: 15px;

  ::placeholder {
    /* padding-left: 35px; */
    color: #9196ab;
    padding-left:25px;
  }
  &:focus {
    box-shadow: 5px 5px 15px #888888;
    outline-style: none !important;
    ::placeholder {
      color: transparent;
    }
    &:hover {
      box-shadow: 5px 5px 20px #888888;
    }
  }
`;

Answer 1

根据您定位搜索图标的方式，您可以像这样向输入添加左填充：

padding-left: 20px;