mdbootstrapの入力フィールド内の検索ボタンを取得する方法は？

Question

こんにちは私は入力フィールドの中で検索ボタンを取得するために以下のことをしようとしていますが、それは動作しません。私は次のコードを書いています。

<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を削除していますが、あなたの入力フィールドと大きなボタンを動作させるための追加のスタイルを持っている場合、あなたはおそらく勝ちましたそのクラスを削除する必要があります。