How to make the search box like the image below:

[![enter image description here](https://i.stack.imgur.com/h0ezb.png)](https://i.stack.imgur.com/h0ezb.png)

This is what I have tried :

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

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