如何開始在輸入文本內的圖標右側輸入文本？

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;