.input_container { display: flex; border-bottom: solid 1px grey; transition: border-color 0.1s ease-in; background: white; } .input { color: blue; display: block; width: calc(100% - 20px); border: none; outline: none; padding: 8px 16px; } .input_img { flex-basis: 20px; display: inline-block; padding: 8px 16px; cursor: pointer; } <div class="input_container"> <input type="text" class="input" value> <span class="input_img" data-role="toggle"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z" fill="currentColor" /> </svg> </span> </div>

我遇到过这样的情况。它没有工作，因为背景:#ebebeb;我想把背景放在输入字段，该属性不断地显示在背景图像的顶部，我无法看到图像!我把background属性移到background-image属性上面，它起作用了。

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

我的解决方案是:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

值得一提的是，边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。

没有背景图片的解决方案:

.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; ｝ <input type="text" class="icon" value placeholder="Search">

或者从右到左的图标

.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; ｝ <input type="text" class="icon-rtl" value placeholder="Search">

我不想改变我的输入文本的背景，也不会与我的SVG图标工作。

我所做的就是为图标添加负边距，这样它就会出现在输入框中

并在输入中添加相同的填充值，这样文本就不会出现在图标下面。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联风格是为了可读性考虑使用类

你可以用另一种方法点击它，让它做一个函数。看看下面的例子:

<div id="search-bar">
  <input placeholder="Search or Type a URL">
  <button><i class="fas fa-search"></i></button>
</div>

#search-bar {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 60px;
}
#search-bar > input {
  width: 750px;
  font-size: 30px;
  padding: 20px;
  border-radius: 50px 0px 0 50px;
  border: none;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  background: #fff; /* CSS Edit Here */
}
#search-bar > button {
  background: #fff;
  border: none;
  font-size: 30px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 0 50px 50px 0 ;
  padding-right: 20px;
}

我觉得这是最好最干净的解决办法。在input元素上使用text-indent:

{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; ｝ <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />