Place image on the left side of a styled input in a React application

I'm striving to achieve a design similar to this: goalimg

Here's my progress so far: currentimg

In order to have the search icon appear to the left of the placeholder text within this input field, I am utilizing a styled input component in React JavaScript.

This is the CSS style applied to the input:

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;

`;

Additionally, here's the relevant code within the render() method:

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

Any insights on how to position the image inside the input field next to the placeholder text?

javascriptcssreactjsinputstyled-components

Answer №1

To implement Font Awesome icons in your project, you need to follow these steps:

<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, include the following code:

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

Add this styling to your CSS file:

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

Alternatively, you can use the following CSS without padding:

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

Adjust the top and left values for precise positioning.

Feel free to customize the input with additional styles.

You can find a variety of icons here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to set the background of the first sibling element to blue, but change it when another sibling element is hovered over?

I have a list of names: <div>Timothy Gruns</div> <div>Lawrence Fishly</div> <div>Jackson Crolya</div> What I want is for the background color to change to blue when any name is hovered over. However, if no names are be ...

csstwitter-bootstrap

Issue with depth perception in a 3D bar graph created with D3.js

I am currently working on a 3D bar chart in D3.js, inspired by the code found here I'm facing an issue where, when the bars are placed close together and the chart is rotated, the perspective/projection/view behaves strangely, causing some values to ...

javascriptd3.jsthree.js3d

Steps to align an SVG to the right within a div

I'm struggling to get an SVG to align at the end of its containing div. The div is set to display in flex and I've tried using "align-self: flex-end" on the a tag that wraps the svg, as well as experimenting with block and float-right. Any sugges ...

htmlcssbootstrap-4frontend

Selenium IDE's float calculation in javascript results in a value of 1 instead of the expected 1.99

I am trying to perform a JavaScript evaluation in Selenium IDE that involves multiplying 3 decimal values. javascript{parseFloat(storedVars['val1'])*parseFloat(storedVars['val2'])*parseFloat(storedVars['val3'])} However, whe ...

javascriptseleniumdecimal

One-touch dial feature for mobile-friendly website

Currently working on a single page responsive website and looking for guidance on inserting a quick call button that will only be visible when accessed on mobile phones, while remaining hidden on desktops and tablets. Your assistance is greatly valued. Th ...

javascripthtmlcss

Creating a Vue.js v-for loop to dynamically display a series of DIVs in segments

Here is the code I am currently working with: <div class="container-fluid" id="networdapp" style="display:none;"> <div class="row" > <div v-for="(result,i) in results" :key="i" class="col-sm-6" > <div class=" ...

javascripthtmlcssvue.jsvuejs2

Adjusting the drag mouse position in jqueryUI

I'm currently working on coding a Lockscreen design inspired by ios8. I want to create a draggable element that only moves along the x-axis. $( "#IDlsDragable" ).draggable({ axis: "x" }); .lockscreen { position:fixed; top:0px; left:0px; wid ...

javascriptjquery-ui

Improving file reading and parsing efficiency with fast random access using csv-parse in Node.js

I recently encountered a challenge while working with the csv-parser library in node for parsing large CSV files. The files I work with can range from 50,000 to 500,000 lines or even larger. My task involved performing computations on this data and then su ...

javascriptnode.jsfilestreamnode-worker-threadscsv-parser

What is the best way to retrieve the value of a Select element that is rendered dynamically through the onChange method?

My Select component from Material UI looks like this: <FormControl className='select-form'> <InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel> <Select labelId="demo-simp ...

reactjsselectreact-reduxmaterial-ui

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

htmlcssangular

Change the button icon to something new when you hover over it

Below is the liquid code I am working with: <a href="{{ section.settings.button_link }}" class="btn--rounded"> {% include 'icon-btn--rounded' %} <div class="link-label">{{ section.settings.button_ ...

cssshopifyliquid

Customizing Material-UI Select Components

I am looking for a way to customize the positioning of the Select component that opens the menu as a modal by default. I want it to render inline below the controlling input. While I came across a library based on Material-UI Select here, unfortunately, ...

reactjsmaterial-ui

Issue with the left margin of the background image

I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected ...

htmlcssbackground

Creating a standard login.js file for seamless integration with nightwatch.js testing

When creating tests for my web application, I need to first simulate a login before proceeding with the rest of the tests to access inner pages. Currently, I am in the process of refactoring the code so that I can create an 'include' for common f ...

javascriptseleniumnpmnightwatch.js

Sharing information between controllers while being initiated using $rootScope.$emit

I've created a common module that includes a controller, component, and template to initialize the app and set up the base layout. Within this module, there is also a stateful component that makes an HTTP GET request during initialization to fetch a b ...

javascriptangularjs

Invoking JavaScript function from an Android Activity

I have a simple JS function that is supposed to set values of some html contents, but it doesn't seem to be working properly. Here is the code for the JS function: function SetEdits(name,email,pic,date) { document.getElementById("myPic").src=pic; doc ...

javascriptandroidandroid-webview

extracting numerical values from a string using javascript

Currently, I am engaged in a project that requires extracting phone numbers from a string. The string is stored in a JavaScript array called dine. { "group": 1, "tel1": "Tél(1): 05.82.77.31.78", "tel2": "Tél(2): 09.55.86.31.45", }, ,... My goal i ...

javascriptjqueryarrays

Tips for decreasing the file size without compromising the clarity of the image?

Currently, I am working on an image puzzle project using jQuery. Everything is almost complete, except for one issue: when the user selects the 2x2 puzzle, the cropped image size appears too large (the original cropped size). I need to reduce the size of t ...

jqueryhtmlcssimage

Experience the dynamic trio of ReactJS, Redux, and pagination for

I have an API endpoint that provides an array of ingredients. Each ingredient has unique properties such as id, name, measurement unit, density (kg/lt), and cost per measurement unit. The list of ingredients is constantly growing, with thousands already in ...

reactjspaginationredux

What is the most effective way to compare two arrays of objects in JavaScript?

I'm working on a function that needs to return an array of elements based on certain filters. Here is the code for the function: filter_getCustomFilterItems(filterNameToSearch: string, appliedFilters: Array<any>) { let tempFilterArray = []; ...

javascriptarraystypescriptecmascript-6