如何在输入下用两个按钮创建搜索框？

Question

当用户单击按钮A占位符更改为“搜索A”，然后单击按钮B占位符更改为“搜索B”时，我正在尝试在输入下创建带有两个按钮的搜索栏。

我还是CSS代码的新手。因此，请引导我创建类似的搜索栏。我想创建一个这样的搜索栏。

这是我要自定义的示例代码。

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
   </div>
</div>

我想在输入下放置2个按钮。

Answer 1

您好，请检查此代码笔https://codepen.io/anon/pen/zQRojd?editors=1010或下面的代码段。

尽管我认为这不是实现所需目标的最佳方法，但您可能要尝试一下。

我添加了一点javascript function和两个示例button

function myFunction(){
	document.getElementById("myText").placeholder = "Button A";
}
function myFunctionTwo(){
	document.getElementById("myText").placeholder = "Button B";
}

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?" id="myText">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
   </div>
     <button onclick="myFunction()">a</button>
      <button onclick="myFunctionTwo()">b</button>
</div>