需要得到搜寻图片搜索框右端

Question

如何使搜索框像下面的图片：

这是我曾尝试：

.search { 
 
    color: #737373; 
 
    width: 95%; 
 
    border-radius: 100px; 
 
    border: 0; 
 
    outline: none; 
 
    box-shadow: none; 
 
} 
 

 
.circle { 
 
    background: #00DB16; 
 
    border-radius: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="trd-row"> 
 
    <form> 
 
    <input type="text" class="search" placeholder="&nbsp;&nbsp;Search.." required=""> 
 
    <input type="image" class="button circle" src="images/search.png"> 
 
    </form> 
 
</div>

Answer 1

这应该让你开始...

.search{ 
 
    position: relative; 
 
    width: 80%; 
 
} 
 
.search-input { 
 
    color: #737373; 
 
    font-size: 18px; 
 
    width: 100%; 
 
    position: relative; 
 
    padding: 15px; 
 
    border-radius: 100px; 
 
    border: 0; 
 
/* outline: none; */ 
 
    box-shadow: 0 0 5px #ddd; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    right: -30px; 
 
    top: 0; 
 
    background: #00DB16; 
 
    border-radius: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="trd-row"> 
 
    <form> 
 
    <div class="search"> 
 
     <input type="text" class="search-input" placeholder="&nbsp;&nbsp;Search.." required=""> 
 
     <input type="image" class="button circle" src=""> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

由于搜索按钮应重叠的搜索栏，你需要使用position: absolute;可以调整利润率和垫衬只要你想，就来看看下面的代码。

.trd-row容器应该有position: relative，以确保其中的绝对定位元素保留在父元素的上下文中，而不是整个页面。

.trd-row { 
 
    position: relative; /* Important for position absolute below! */ 
 
    margin: auto; 
 
    width: 80%; 
 
} 
 

 
.search { 
 
    color: #737373; 
 
    width: 95%; 
 
    border-radius: 100px; 
 
    height: 50px; 
 
    padding: 0 20px; 
 
    border: 0; 
 
    outline: none; 
 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
 
} 
 

 
.circle { 
 
    background: #00DB16; 
 
    border-radius: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 1px; 
 
    right: -20px; 
 
}

<div class="trd-row"> 
 
    <form> 
 
    <input type="text" class="search" placeholder="&nbsp;&nbsp;Search.." required=""> 
 
    <input type="image" class="button circle" src="http://findicons.com/files/icons/949/token/256/search.png"> 
 
    </form> 
 
</div>

Answer 3

从hunzaboy的解决方案是正确的，但我试图做几乎完全图像的搜索框。

.trd-row { 
 
    width : 100%; 
 
} 
 

 
.trd-row form { 
 
    width : 450px; 
 
    height : 50px; 
 
    margin : 15px; 
 
    position : relative; 
 
} 
 

 
.trd-row form .search { 
 
    position : absolute; 
 
    left : 0px; 
 
    width : 400px; 
 
    padding : 15px; 
 
    padding-left : 20px; 
 
    border : none; 
 
    border-radius : 25px; 
 
    box-shadow : 2px 2px 4px #ccc; 
 
    font-size : 18px; 
 
} 
 

 
.trd-row form .button-circle { 
 
    position : absolute; 
 
    right : 10px; 
 
    width : 25px; 
 
    height : 25px; 
 
    padding : 14px; 
 
    border-radius : 26.5px; 
 
    background-color : #00DB16; 
 
}

<div class="trd-row"> 
 
    <form> 
 
    <input type="text" class="search" placeholder="Search" required=""> 
 
    <input type="image" class="button-circle" src="http://www.clker.com/cliparts/n/U/H/1/H/u/search-icon-white-one-md.png"> 
 
    </form> 
 
</div>