html - 需要让Search Image到搜索框的右端

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>