Как создать окно поиска с двумя кнопками под входом? - PullRequest
Новая
       22

Как создать окно поиска с двумя кнопками под входом?

0 голосов
/ 23 мая 2019

Я пытаюсь создать панель поиска с двумя кнопками под вводом, когда пользователь нажимает кнопку «Заполнитель» изменил «Поиск А», а кнопка «Заполнитель В» изменил на «Поиск Б».

Я все еще новичок в коде CSS. Поэтому, пожалуйста, помогите мне создать подобную строку поиска. Я хочу создать строку поиска, как это.

enter image description here

Это пример кода, который я хочу настроить. 

.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 кнопки под вход.

1 Ответ

0 голосов
/ 23 мая 2019

Здравствуйте, пожалуйста, проверьте эту кодовую ручку 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>
...