検索ボックスと検索アイコンが一緒に

Question

私は、次のHTMLを貼り作り方： -

<div class="input-append"> 
     <input id="txtSearchByLocation" name="searchTerm" type="text" class="" placeholder="Search By Location" style="padding-left: 14px;"> 
     <button id="btn-submit-search" class="btn" type="submit" onclick="searchByLocation()"><span class="icon-search"></span></button> 
    </div> 

検索ボタンをし、一緒に固執していないテキストを検索します。どうすればそれをすることができますか？

Answer 1

入力の境界線を透明に設定し、ボタンを好みに合わせてスタイル設定することができ、入力要素を選択してdiv内で折り返す場合は、輪郭を透明に設定して「青色」の輪郭を無効にします。下のスニペットのように。

.btn{ 
 
    border-left: 2px solid #929292; 
 
    border-right: transparent; 
 
    border-top: transparent; 
 
    border-bottom: transparent; 
 
    height: 36px; 
 
    outline: transparent; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
    background-color: #9e9e9e; 
 
    border-top-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
    font-weight:bold; 
 
    color: #333; 
 
} 
 
.btn:hover{ 
 
    background-color: #00B6FA; 
 
} 
 
.input-append{ 
 
    border: 2px solid #929292; 
 
    border-radius: 5px; 
 
    float: left; 
 
} 
 
#txtSearchByLocation{ 
 
    outline: transparent; 
 
    border: transparent; 
 
    padding: 0px 5px 0px 10px; 
 
    height: 33px; 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
}

<div class="input-append"> 
 
    <input id="txtSearchByLocation" name="searchTerm" type="text" class="" placeholder="Search By Location" style="padding-left: 14px;"> 
 
    <button id="btn-submit-search" class="btn" type="submit" onclick="searchByLocation()">SEARCH</button> 
 
</div>

Answer 2

あなたはこれを試すことができます。

<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span> 
<input id="search" name="search" class="form-control" placeholder="enter your query" type="text" required>