如何在占位符中插入自定义图标？

Question

我们可以在标签输入中插入自定义图标占位符吗？

<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>

我想使用 searchIcon 作为图标：

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

Answer 1

我不确定你的情况是否可行，但我会尝试设置：

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

Answer 2

使用此方法，您可以在占位符中使用任何图像。

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" />

您可以使用 font-awesome 在占位符中插入图标。

<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" />

如何在占位符中插入自定义图标？

How to insert custom icon in placeholder?

html

input

placeholder