html - 如何让搜索框和搜索图标粘在一起

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>