Question 138646 in Html Question posted in
Some basic documentation can be found here.

Can I insert an image into a text input in React?

I’m trying to make a SearchBar in React that as an icon in it, something like this:SearchBar

Initially I had a button, like this:

const SearchBar = ({ width, text, marginBottom }) => {
  return (
    <button className='searchBar' type="text" style={{ width: width, marginBottom: marginBottom}}>
        <img src={search} alt="searchBar" />
        <p>{text}</p>
    </button>
  )
}

however with a button I can’t type nothing there, then I switched to an input, however is not possible to add childs in an input tag.

How can I solve this?

Tags:

2

Answers


  1. 0

    Do you mean an input field with a search icon button?
    you should create a wrapper like div. and inside it add a button and input

    Login or Signup to reply.
  2. 0

    The answer is you can’t, you have to use a trick with hmtl tags and css.

    Put the input and the image inside a div, then style the div to look like an input:

    .input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    border-width: 1px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
}

.input {
    border: none;
    outline: none;
    width: 100%;
}
    <div class="input-container">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAKtJREFUOE/tkjEKhDAQRX8QNAewSBdBvP9FcgFJkxiEBMHCRhElMrMsu80Wbu00Kf5/8yfDCGNMxp8lHvje5nhhdV2jqiocx4GyLBFj5C7neaIoCuSc0bYt+r7nd1kWTNMEhoUQ0Fpj33duklJimIzWWmzbhqZp4L1H13VY1xUhhBdMRhLJJKXEPM+cqJTCOI6cRPowDBxCkzjnPvD7tzQFib/qW3+O5N6N4AIddHfdBQuQqAAAAABJRU5ErkJggg==" class="img" />
    <input type="text" class="input" placeholder="insert text" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search