How to insert custom icon in placeholder?-CodePudding

Can we insert a custom icon placeholder in tag input?

<form action="" onSubmit={onSubmit}>
       
          <input
            ref={inputEl}
            type="text"
            className="py-1 border-0 rounded-sm flex-1 placeholder-base-6"
            placeholder="Search app by name, type, or category"
            style={{
              width: 301,
              height: 44,
              background: 'rgba(235, 236, 239, 0.7)',
            }}
            value={isSearch}
            onChange={(e) => setIsSearch(e.target.value)}
          />
        </form>

I want to use searchIcon for the icon:

 <span className="flex border-0 ">
      <img src={SearchIcon} alt="" />
 </span>

CodePudding user response：

With this method you can use any image in placeholder.

input {
    background-image: url(https://www.qries.com/images/banner_logo.png);
    background-size:30px;
    background-position: 1px center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    padding: 10px 5px 10px 20px;
    text-indent: 20px;

    -webkit-transition: all 0.2s;
    -moz-transition: all 2s;
    transition: all 0.2s;

    width: 200px;
   }

<input type="search" name="search" placeholder="search" rel="search" />

You can use font-awesome to insert icon in placeholder.

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

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

CodePudding user response：

I'm not sure if this is possible in your case but I would try to set:

 style={{
     background-image: url('{SearchIcon}'),
 }}