Question

191

How to Insert an image inside an input field in react js?

rated 0 times [ 196] [ 5] / answers: 1 / hits: 5979 / 3 Years ago, fri, may 28, 2021, 12:00:00

.js file

     <div className = "num">

    <p >Enter Phone Number <span className='star'>*</span></p>



    <input

      type="tel"

      className="code"

      placeholder="+91"

    />



    <img className='drop' src={drop} alt='drop' />



    <input

      type="tel"

      className="number"

      placeholder="00000 00000"

    />

    </div>

.css file

.drop{

  color: #797B86;

  margin-top: 46.5px;

  margin-left:-30px;

without giving negative value, I'm unable to move it inside the box.Even after moving it inside the box, the space between these two boxes gets disturbed. What is the best way to do this?

} 

.star{

  color: #DE1F48;

}

Is it possible without giving negative values in stylesheet?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyterryp

Add To Favorites

Follow

Total Points: 290

Total Questions: 92

Total Answers: 95

Location: Montenegro

Member since Sun, May 7, 2023

1 Year ago

harleyterryp questions

1 error Filters are deprecated how to solve this error in vue.js 3

Fri, Jun 11, 21, 00:00, 3 Years ago

1 ElectronJS: Uncaught TypeError: Cannot read property BrowserWindow / getCurrentWindow of undefined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 Access React context API from _app in NextJS

Fri, Oct 2, 20, 00:00, 4 Years ago

1 jsPDF with AutoTable not working - Possible JavaScript issue

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How to generate an image from the JsBarcode implementation?

Thu, Jan 30, 20, 00:00, 4 Years ago

View All

answered 3 Years ago ashli · Accepted Answer

You can surround your input and image by another element, and set the position of the image based on the parent as below:

.container { 

    position:relative;

    padding:0;

    margin:0;

}

.input { 

    height:20px;

    margin:0;

    padding-left:30px;

}

.image {

    position:absolute;

    bottom:8px;

    left:10px;

    width:10px;

    height:10px;

}

<div class=container>

    <input class=input type=text id=input value>

    <img src=https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/right-forward-arrow-512.png class=image>

</div>