styled.input 中占位符左侧的图像反应

Question

i am trying to achieve this design: goalimg我正在努力实现这个设计： goalimg

and this is what i have so far: currentimg这就是我到目前为止所拥有的： currentimg

I need to have the search icon display to the left of the placeholder text in this input.我需要在此输入中的占位符文本左侧显示搜索图标。 I am using a styled input component in react javascript.我在反应 javascript 中使用样式输入组件。 This is my CSS style for the input:这是我输入的 CSS 样式：

const SearchBar = styled.input`
color: #000000;
margin-top: 20px;
background: #F2F2F7;
padding-left: 35.33px;
border-radius: 50px;
height: 30px;

border: 1px solid ${props => props.theme.gray2};
padding-top: 7px;
padding-bottom: 7px;
margin-left: 14px;
margin-right: 14px;
outline-width: 1px;
display: flex;
flex-direction: row;

`; `;

and this is in the render() method:这是在 render() 方法中：

<SearchBar placeholder="Search Chats"></SearchBar>

How can I place the image in the input to the left of the placeholder text?如何将图像放置在占位符文本左侧的输入中？

Answer 1

in your index.html (or where ever you are rendering your app to) add to the head:在您的 index.html （或您将应用程序渲染到的任何位置）中添加到头部：

<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div id="app"></div>

in your React file add:在你的 React 文件中添加：

 <span className='search-bar'>
    <i className="fa fa-search" aria-hidden="true"></i>
    <input></input>
 </span>

in your Css file add:在您的 Css 文件中添加：

.search-bar { 
  position: relative;
  input { padding: 12px; }
  .fa-search { 
    position: absolute; 
    padding: 12px;
    top: 2px; 
    left: 5px; 
    z-index: 1; 
  }
}

or, instead of padding, you can use或者，代替填充，您可以使用

.fa-search { 
  position: absolute; 
  top: 2px; 
  left: 5px; 
  z-index: 1; 
}

Adjust the top & left value to position it exactly.将顶部和左侧值精确调整为 position。

Plus any other styling to the input.加上输入的任何其他样式。

you can access many icons here: link您可以在此处访问许多图标：链接

styled.input 中占位符左侧的图像反应

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-19 08:40:12

styled.input 中占位符左侧的图像反应

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-19 08:40:12

解决方案1
0 已采纳 2020-08-19 08:40:12