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

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

您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。

换句话说，它们有这两条CSS规则:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

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

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

我用下面的代码实现了这一点。

首先，你弯曲容器，使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。

然后，使输入占用宽度的100%。给出图标的绝对位置，使其与输入重叠。

然后为输入添加右填充，这样输入的文本就不会到达图标。最后使用css属性给图标留出一些距离输入框边缘的空间。

注意:Icon标签可以是一个真正的图标，如果你是在ReactJs中工作，也可以是一个占位符，用于你在项目中使用图标的任何其他方式。

.inputContainer { 显示:flex; 对齐项目:中心; 位置:相对; ｝ .input { 宽度:100%; padding-right: 40像素; ｝ .inputIcon { 位置:绝对的; 右:10 px; ｝ < div class = " inputContainer”> <input class="input" /> <图标类="inputIcon" /> < / div >

在开始时使用这个CSS类作为输入，然后相应地自定义:

.inp-icon { 背景:url(https://i.imgur.com/kSROoEB.png)no-repeat 100%; background-size: 16 px; ｝ <input class="inp-icon" type="text">

我遇到过这样的情况。它没有工作，因为背景:#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;
}

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