html - 如何在输入下创建带有两个按钮的搜索框？

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 函数 和两个示例 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>