データリスト入力フィールド内のBSボタン？ここで

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <input list="absolventini" id="search-absolvent-form-input" class="form-control"> 
 
     <span class="input-group-btn"> 
 
    \t \t \t \t <button class="btn btn-default" type="submit"> 
 
    \t \t \t \t \t <i class="glyphicon glyphicon-search"></i> 
 
    \t \t \t \t </button> 
 
    \t \t \t </span> 
 
     <datalist id="absolventini"> 
 
     <option value="1"> 
 
      <option value="2"> 
 
      <option value="3"> 
 
     </datalist> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<form> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <input type="text" id="search-absolvent-form-input" class="form-control"> 
 
     <span class="input-group-btn"> 
 
    \t \t \t \t <button class="btn btn-default" type="submit"> 
 
    \t \t \t \t \t <i class="glyphicon glyphicon-search"></i> 
 
    \t \t \t \t </button> 
 
    \t \t \t </span> 
 
    </div> 
 
    </div> 
 
</form>

fiddleデモです。 2番目の入力（テキスト）には、入力フィールド内に検索アイコンがあります。最初の入力（データリスト）アイコンが外にあります。私はそれが内部にあることを望む。

Answer 1

これは、次のスタイルが2番目のフォームのボタンに適用され、最初のフォームのボタンに適用されないためです。これは、以下のスタイルがフォームの最後の子に適用される/ input-grpとそれには.btnクラスがありますが、最初のフォームではdatalistがボタンではなく最後の子です。

.input-group .form-control:last-child, 
.input-group-addon:last-child, 
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn, 
.input-group-btn:first-child>.btn:not(:first-child), 
.input-group-btn:last-child>.btn, 
.input-group-btn:last-child>.btn-group>.btn, 
.input-group-btn:last-child>.dropdown-toggle { 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
} 

ので、このための解決策はspanタグ上のデータリストを移動するために、彼らは、入力フィールドの内部にあるかのように両方のボタンが同様に表示されますです。以下は同じもののデモです。場合にはあなたが彼らにボタンを持っていない場合

.input-btn-inside{ 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
} 

があなたのボタンにこれを適用します。そして、ここにもう一つの解決策のようなクラスを定義することです更新Fiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <input list="absolventini" id="search-absolvent-form-input" class="form-control"> 
 
     <datalist id="absolventini"> 
 
     <option value="1"> 
 
      <option value="2"> 
 
      <option value="3"> 
 
     </datalist> 
 
     <span class="input-group-btn"> 
 
    \t <button class="btn btn-default" type="submit"> 
 
    \t \t <i class="glyphicon glyphicon-search"></i> 
 
    \t </button> 
 
    </span> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<form> 
 
    <div class="form-group"> 
 
    <div class="input-group"> 
 
     <input type="text" id="search-absolvent-form-input" class="form-control"> 
 
     <span class="input-group-btn"> 
 
    \t <button class="btn btn-default" type="submit"> 
 
    \t \t <i class="glyphicon glyphicon-search"></i> 
 
    \t </button> 
 
    </span> 
 
    </div> 
 
    </div> 
 
</form>

です.input-groupの最後の子として

希望します。