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

Question

I'm trying to reproduce this: input icon type search

My result so far: my result

My question is: How can I put this input element to start typing the text to the right of the icon as in the first image?

I've tried to change the type element to display the icon to (Not work), tried (Not work). I'm using Styled Components.

That's my 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;