如何获取mdbootstrap中输入字段内的搜索按钮？

Question

您好我试图做以下操作来获取输入字段中的类别输入-OL的搜索按钮，但它不工作。我正在写下面的代码。

<form id="search_form" onsubmit="return false;"> 
       <div class="input-group"> 
        <input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/> 
        <span class="input-group-btn" onclick="return searchcontent()"> 
         <button class="btn btn-outline-primary" type="button" aria-label="Search"> 
          <i class="fa fa-search fa-2x" aria-hidden="true"></i> 
         </button> 
        </span> 
       </div> 
</form> 

The output looks like this

Answer 1

我认为你需要的类form-control添加到您的输入元素来得到它的工作。

.input-group input.input-ol { 
 
    border-radius: 50px; 
 
} 
 

 
button.rounded { 
 
    border-radius: 10px 50px 50px 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-lg-6"> 
 
    <form id="search_form" onsubmit="return false;"> 
 
     <div class="input-group"> 
 
     <input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " /> 
 
     <span class="input-group-btn" onclick="return searchcontent()"> 
 
      <button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search"> 
 
      <i class="fa fa-search" aria-hidden="true"></i> 
 
      </button> 
 
     </span> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

我也删除从图标元素的类fa-2x只是为了让段的工作，但如果你有更多的风格，使较大的按钮与您可能赢得”你的输入字段不得不删除那个班级。