需要将搜索图像放在搜索框的右端

Question

如何使搜索框如下图所示：

这就是我的尝试：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该让你开始......

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于搜索按钮应与搜索栏重叠，因此您需要使用position: absolute;您可以根据需要调整边距和填充，只需看下面的代码。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>